Asynchronous Requirement

Question

I call a function in a class named Preco2, as shown in the code.

Function:

$(function() {
  $('.Preco2').maskMoney({ decimal: '.', thousands: ' ', precision: 2 });
})

Input:

<td><input type="text" class="form-control Preco2" name="Preco2[]" id="Preco2" value="0.00"></td>

It works perfectly. But when I call the asynchronous request it no longer works. How can I solve?

Asynchronous request:

success: function(result)
    { 
    $('#employee_ta22').dataTable().fnDestroy();
    $.ajax({
       url: './atualizarencomendaaprovada',
       type: 'get',
       dataType: 'json',
       success: function(data){
            if(!data){
            $("#employee_ta22 tbody").empty();
         }else{
         var linha = ``; 
         for(let item of data){ 
         linha += `<tr id=${ item.Id }>          
         <td style="display:none"><input type="text" rows="4" name="teste2[]" id="teste2" value=${ item.Id }></td> 
         <td>${ item.DataAprovacao }</td> 
         <td>${ item.Identificacao }</td>   
         <td style="display:none"><input type="text" name="teste3[]" id="teste3" value=${ item.IdProduto }></td></td> 
         <td>${ item.Produto }</td>
         <td style="display:none"><input type="text" name="teste4[]" id="teste4" value=${ item.Quantidade }></td> 
         <td>${ item.Quantidade }</td> 
         <td><input min='0' oninput='this.value = Math.abs(this.value)' type="number" id="Unid" name="Unid[]"></td> 
         <td>${ item.Requerente }</td> 
         <td style="display:none"><input type="text" name="vale[]" value=${ item.IdDestino }></td>
         <td>${ item.Destino }</td> 
         <td>${ item.Fornecedor }</td> 
         <td><select class="form-control" name="EstadoFinal2[]"><option></option>
            <?php        
            $sql = "SELECT * FROM raddb.Status WHERE Id IN ('5', '6') ORDER BY Estado DESC";
            $qr = mysqli_query($conn, $sql);
            while($ln = mysqli_fetch_assoc($qr)){
            echo '<option value="'.$ln['Id'].'">'.$ln['Estado'].'</option>';
            }
            ?>      
            </select></td>
            <td><input type="text" class="form-control Preco2" name="Preco2[]" id="Preco2" value="0.00"></td>
            <td><textarea type="text" class="form-control" name="Apontamentos[]" rows="2"></textarea></td>
            <td><input type="text" class="form-control" name="Fatura[]"></td>
         </tr>`;
         } 
         $("#employee_ta22 tbody").html(linha); 
    $('#employee_ta22').dataTable({ 
    "pagingType": "full_numbers", 
   "iDisplayLength": 5,                          
   "oLanguage": {
"sProcessing": "Aguarde enquanto os dados são carregados ...",
"sLengthMenu": "Mostrar _MENU_ registos por página",
"sZeroRecords": "Nenhum registo correspondente ao criterio encontrado",
"sInfoEmtpy": "Exibindo 0 a 0 de 0 registos",
"sInfo": "Exibindo de _START_ a _END_ de _TOTAL_ registos",
"sInfoFiltered": "",
"sSearch": "<span class='glyphicon glyphicon-search'></span>",
"oPaginate": {
   "sFirst":    "<span class='glyphicon glyphicon-fast-backward'></span>",
   "sPrevious": "<span class='glyphicon glyphicon-backward'></span>",
   "sNext":     "<span class='glyphicon glyphicon-forward'></span>",
   "sLast":     "<span class='glyphicon glyphicon-fast-forward'></span>"
  }
 }
 });             
  }
 }
 });
 }

Answer 1

That is because $('.Preco2') only checks for elements that already exist in the document, not those that will come in the future.

Move that line inside the success callback of your $.ajax request, after you have added the data table to the document.