Multiply inputs on dynamically generated table rows

Question

I'm trying to dynamically generate table rows and use them to make a math resolution. But the update of the values is not working. The html table:

<tr class="multLote">
<th><input type="text" name="lote[]" value="0"></th>
<th><input type="text" name="lote100[]" class="val100" value="0"></th>
<th><input type="text" name="lote50[]" class="val50" value="0"></th>
<th><input type="text" name="lote20[]" class="val20" value="0"></th>
<th><input type="text" name="lote10[]" class="val10" value="0"></th>
<th><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></th>
</tr>

This table use jQuery to add rows:

$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><th><input type="text" name="lote[]" value="0" /></th> ' +
'<th><input type="text" name="lote100[]" value="0" class="val100" /></th>' +
'<th><input type="text" name="lote50[]" value="0" class="val50" /></th>' +
'<th><input type="text" name="lote20[]" value="0" class="val20" /></th>' +
'<th><input type="text" name="lote10[]" value="0" class="val10" /></th>'+
'<th><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></th>'+
'<th><a href="#" onclick="remover(this)" class="remove-box">Remover</a></th></tr>');

$('#tabela-lotes tbody').append(box_html);
    return false;
});

And this jQuery to multiply the input values of the rows:

$(".multLote input").keyup(multInputs);

function multInputs() {                                       
    var mult = 0;
    // for each row:
    $("tr.multLote").each(function () {

    // get the values from this row:
    var $val100 = $('.val100', this).val();
    var $val50 = $('.val50', this).val();
    var $val20 = $('.val20', this).val();
    var $val10 = $('.val10', this).val();
    var $total = ($val100 * 100) + ($val50 * 50) + ($val20 * 20) + ($val10 * 10);
    // set total for the row
    $('.lote_result', this).val($total);
    mult += $total;
    });

}  

It only works on the first row, the not-generated one. Any changes on the top rows update all the rows, but that's not what we want. Any leads?

Answer 1

Use a delegated event handler , attached to a non-changing ancestor element.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/wowne0La/3/

eg

$(document).on("keyup", ".multLote input", multInputs);

document is the default if nothing else is closer, so in your case probably use #tabela-lotes :

$('#tabela-lotes').on("keyup", ".multLote input", multInputs);

It works by applying the jQuery selector at event time , not when the event was registered. This means it can work for items that do not yet exist beneath that ancestor element.

Notes:

• I also changed the handler to find and accumulate the current row only.
• I change the TH elements to TD as TH is for table headers only.
• The remover code can also be handled with a delegated event, as attribute-based event handlers are a really bad idea with jQuery.

Remover code:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/hrea9pw6/

$('#tabela-lotes').on('click', '.remove-box', function(e){
    e.preventDefault();
    $(this).closest('tr.multLote').remove();
});