maskMoney does not work on input within table

Question

Here I call the mask wearing class

$(function($){
    $(".dinheiro").maskMoney();
});

in form inputs works normal, but in table does not work.

function addProd(obj) {
$('#add_prod').val('');
var id = $(obj).attr('data-id');
var name = $(obj).attr('data-name');
var price = $(obj).attr('data-price');

$('.searchresults').hide();

if ($('input[name="quant[' + id + ']"]').length == 0) {
    var tr =
        '<tr>' +
        '<td>' + id + ' - ' + name + '</td>' +
        '<td>' +
        '<input type="number" name="quant" class="p_quant" value="1" onchange="updateSubtotal(this)" data-price="' + price + '" />' +
        '</td>' +
        '<td>' + price + '</td>' +
        '<td>' +
        '<input type="text" name="servico[' + id.trim() + ']" class="servico" onkeyup="carregaServico(this)" id="servico[' + id.trim() + ']" data-type="search_servico" />' +
        '</td>' +
        '<td  width="10%" class="dinheiro">' +
        '<input type="text" name="vlr_servico[' + id.trim() + ']" data-id="' + id + '" onblur="formataDinheiro(this)" id="vlr_servico[' + id.trim() + ']" class="dinheiro" />' +
        '</td>' +
        '<td class="subtotal">' + price + '</td>' +
        '<td><a href="javascript:;" onclick="excluirProd(this)">Excluir</a></td>' +
        '</tr>';

    $('#products_table').append(tr);
}

updateTotal();
}

Answer 1

Your problem is assigning the class .dinheiro to a td and to inputs who wants to apply the maskmoney.

Solution: leave only the class .dinheiro to inputs and re-bind when adding new inputs.

<input type="text" class="dinheiro" />

When assigning the class to an element that is not input, you cause error in the plugin as it will not recognize the value to be treated.

$(function($){
    $(".dinheiro").maskMoney();
});

function addProd(obj) {
   var tr =
   '<tr>' +
   '<td  width="10%">' +
   '<input type="text" class="dinheiro" />' +
   '</td>' +
   '</tr>';
   $('#products_table').append(tr);
   $(".dinheiro").maskMoney();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<table id="products_table">
   <input type="text" class="dinheiro" />
</table>
<br />
<input type="button" value="Add novo campo" onclick="addProd()" />

Answer 2

When executing $(".dinheiro").maskMoney(); is made a bind in all elements with the class dinheiro to wear the mask.

If you add a new element (as in the case of the table), even if it has the class dinheiro, the bind for the elements already made, so the mask should not work for a new element.

To correct, just do the re-bind of the mask for the elements:

function addProd(obj) {
    // código da função...
    if ($('input[name="quant[' + id + ']"]').length == 0) {
        var tr = ...;

        $('#products_table').append(tr);
        //faz o re-bind caso tenha sido adicionado um novo input
        $(".dinheiro").maskMoney();
    }
    updateTotal();
}