Set mask to input when appended with $.post

Question

I load a peace of html code with ajax, and I need to set a mask on a input element within this loaded html.

I load the html:

    // procurar clientes
$("#submit-busca").click(function (){

    nome = $("#nome-busca").val();

    if(nome == ''){
        alert("Busca não especificada.");
        return false;
        }

    // get tabela de resultados
    $.post( "php/processa-busca-cliente-atendimento.php", { id: <?php echo $user_id; ?>, nome: nome })
    .done(function( data ) {
    $("#resultado-busca").html(data);
    });

    return false;

    });

And then try to set the mask:

$( document ).on( "load", ".cell-cpf", function() {
        $('.cpf').mask('999.999.999-99');
        });

The code above, only work if I use "click", but I want to set the mask on "load" or "ready". I try this but dont work. Do i speak clear?

Answer 1

Try this,

$( document ).ready( function() {
    $('.cpf').mask('999.999.999-99');
});

Also in $.post,

$.post( "php/processa-busca-cliente-atendimento.php", { id: <?php echo $user_id; ?>, nome: nome })
.done(function( data ) {
   $("#resultado-busca").html(data);
   $('.cpf').mask('999.999.999-99');
});

Updated, then try DOMSubtreeModified like,

$(function(){
    $(document).bind('DOMSubtreeModified', function () {
       if ($('.cpf').length) {
           $('.cpf').mask('999.999.999-99');
       }
    });
});

Read jquery-does-not-execute-on-document-change