Executar plugin JS no innerHTML

maxpereira · Abril 3, 2019

Olá pessoal, tudo bem?

Estou criando um formulário, e preciso usar máscaras para o rg, cpf, etc, então utilizei um plugin JS que encontrei, e funcionou belezinha.

O problema é que precisei criar campos dinamicamente, e encontrei uma função JS que funcionou muito bem, mas os campos criados pela função não executam o plugin de máscaras.

Eu manjo quase nada de JS, mas pesquisando encontrei que o innerHTML não executa scripts no HTML5, e que existe um jeito, mas não encontrei haha .

Enfim, se alguém puder me ajudar agradeço muito, vou deixar o código abaixo (é bem simples), só copiar e colar e baixar o plugin do git que funciona.

o plugin JS que utilizei para gerar as máscaras:
github.com/igorescobar/jQuery-Mask-Plugin

</script>

       $(document).ready(function(){

   $('.rg').mask('00.000.000');
   $('.cpf').mask('000.000.000-00');

   });

var qtdeCampos = 0;
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='rg' 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">

   <label>Preencha os Dados:<label><br>
   <label>RG:</label> <input type='text' name='campoAdmin[]' class='rg' 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>

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