0

Eu fiz um código que adiciona um conjunto de campos dentro de um form, quando solicitado por meio de um botão, e alguns desses campos usam funções js para criar máscaras (para o CPF, rg, CEP), o problema está aí, essas funções de máscara deixam de funcionar nos campos gerados, sei muito pouco de JS então nem faço ideia do que pode ser.. Usei apenas 2 campos pra facilitar, observem que nos campos criados normalmente a função máscara funciona, e nos campos criados pela função, a máscara não funciona.

o plugin JS que utilizei: jQuery-Mask-Plugin

Página html já com as funções JS

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="_js/jquery-3.3.1.js"></script>
<script src="_js/jquery.mask.js"></script>



<script>
    $(document).ready(function(){
      $('.date').mask('00/00/0000');
      $('.mixed').mask('00.000.000');
      $('.cpf').mask('000.000.000-00');
      $('.cep2').mask('00000-000');
      $('.dtIni').mask('00 SS SSSSSS SS 0000');
      $('.cnae').mask('00.00-0-00');
    });

    var qtdeCampos = 0;

</script>

<script type="text/javascript">

    function addAdmin() {
        var objPai = document.getElementById("campoPai");
        //Criando o elemento DIV;
        var objFilho = document.createElement("div");
        //Definindo atributos ao objFilho:
        objFilho.setAttribute("id","filho"+qtdeCampos);

        //Inserindo o elemento no pai:
        objPai.appendChild(objFilho);
        //Escrevendo algo no filho recém-criado:
        document.getElementById("filho"+qtdeCampos).innerHTML = "<br> 
         <label>Preencha os Dados:<label><br> <label>RG:</label> <input type='text' name='campoAdmin[]' class='mixed'  placeholder='Ex: 12.345.678' required autocomplete='off' size='10'> <label>CPF:</label> <input type='text' name='campoAdmin[]' class='cpf' size='13' placeholder='Ex: 123.456.789-16' required><br> <input type='button' onClick='removerAdmin("+qtdeCampos+")' value='Remover Administrador'>";
        qtdeCampos++;
    }

    function removerAdmin(id) {
        var objPai = document.getElementById("campoPai");
        var objFilho = document.getElementById("filho"+id);

        //Removendo o DIV com id específico do nó-pai:
        var removido = objPai.removeChild(objFilho);
    }
</script>
</head>
<body>

    <form name="form1" action="pegardados.php" method="post">
        <!--campos criados normalmente -->
        <label>Preencha os Dados:<label><br>
        <label>RG:</label> <input type='text' name='campoAdmin[]' class='mixed'  placeholder='Ex: 12.345.678' required autocomplete='off' size='10'> 
        <label>CPF:</label> 
        <input type='text' name='campoAdmin[]' class='cpf' size='13' placeholder='Ex: 123.456.789-16' required>

        <!--campos que serão criados pela função JS addAdmin() -->
        <div id="campoPai"></div>
        <input type="button" value="Adicionar campos" onclick="addAdmin()">
        <br><br><input type="submit" value="Enviar">

    </form>
</body>
</html>
0

1 Resposta 1

0

As suas máscaras só são carregadas no $(document).ready() e seus elementos são inseridos após isso, você deve arrumar uma maneira de reaplicar essas máscaras após inserir um novo elemento na tela, creio que separando essas máscaras em uma função

function mascaras(){
    $('.date').mask('00/00/0000');
    $('.mixed').mask('00.000.000');
    $('.cpf').mask('000.000.000-00');
    $('.cep2').mask('00000-000');
    $('.dtIni').mask('00 SS SSSSSS SS 0000');
    $('.cnae').mask('00.00-0-00');
}

carregando elas no $(document).ready() invocando a função

$(document).ready(function(){
    mascaras();
});

e aplicando a máscara novamente a cada elemento inserido

function addAdmin() {
    var objPai = document.getElementById("campoPai");
    //Criando o elemento DIV;
    var objFilho = document.createElement("div");
    //Definindo atributos ao objFilho:
    objFilho.setAttribute("id","filho"+qtdeCampos);

    //Inserindo o elemento no pai:
    objPai.appendChild(objFilho);
    //Escrevendo algo no filho recém-criado:
    document.getElementById("filho"+qtdeCampos).innerHTML = "<br> 
     <label>Preencha os Dados:<label><br> <label>RG:</label> <input type='text' name='campoAdmin[]' class='mixed'  placeholder='Ex: 12.345.678' required autocomplete='off' size='10'> <label>CPF:</label> <input type='text' name='campoAdmin[]' class='cpf' size='13' placeholder='Ex: 123.456.789-16' required><br> <input type='button' onClick='removerAdmin("+qtdeCampos+")' value='Remover Administrador'>";
    qtdeCampos++;

    //invocando a função para reaplicar as máscaras aos elementos
    mascaras();
}

resolva o seu problema.

2
  • Caara, funcionou, nem acredito haha
    – Max
    4/04/2019 às 19:31
  • Eu encontrei na documentação, que o innerHTML não executa scripts no HTML5, então pensei que não iria conseguir por causa de definições da linguagem, valeu mesmo pela ajuda, foi de grande valia.
    – Max
    4/04/2019 às 19:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .