maskMoney does not work in input inside table

Question

maskMoney does not work in input inside table

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

Here I call the mask using class

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

In the form's input it works normal, but inside 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();
}

javascript html jquery ajax maskmoney

asked by anonymous 30.11.2017 / 03:53

2 answers

How do I avoid calling the same function multiple times? Nuget - Packages.Config use latest versions of packages

score 1 · Answer 1

Your problem is to assign the class .dinheiro to a td and to inputs that wants to apply maskmoney .

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

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

When you assign the class to an element other than input , you cause the plugin to fail because it will not recognize the value to be handled.

$(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><scriptsrc="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()" />

score 0 · Answer 2

When running $(".dinheiro").maskMoney(); a bind is made on all elements with the dinheiro class to use the mask.

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

To fix, just do 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();
}