Doubt in Javascript when creating dynamic Ivs

Asked

Viewed 51 times

0

I made a code that adds a set of fields within a form, when prompted by a button, and some of these fields use js functions to create masks (for CPF, rg, CEP), the problem is there, these mask functions stop working in the generated fields, I know very little about JS so I have no idea what it might be.. I only used 2 fields to make it easy, note that in the fields created normally the mask function works, and in the fields created by the function, the mask does not work.

the JS plugin I used: jQuery-Mask-Plugin

HTML page already with JS functions

<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>
javascript html

1 answer

0


Your masks are only loaded on $(document).ready() and its elements are inserted after this, you must find a way to reapply these masks after inserting a new element on the screen, I believe separating these masks into a function

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');
}

carrying them in the $(document).ready() by invoking the function 

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

and applying the mask again to each inserted element

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();
}

solve your problem.

  • Caara, it worked, I can’t believe haha

  • I found in the documentation, that innerHTML does not run scripts in HTML5, so I thought it would not get because of language definitions, thanks even for the help, it was of great value.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.