Question

我正在尝试动态生成表格行并使用它们来进行数学解析。但是值的更新不起作用。 html表：

<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>

此表使用jQuery添加行：

$('.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;
});

这个jQuery乘以行的输入值：

$(".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;
    });

}

它仅适用于第一行，即未生成的行。顶行的任何更改都会更新所有行，但这不是我们想要的。任何线索？

Answer 1

使用委托事件处理程序，附加到不变的祖先元素。

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

e.g。

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

document是默认值，如果没有其他内容更接近，那么在您的情况下可能会使用#tabela-lotes：

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

它的工作原理是在事件时间应用jQuery选择器，而不是在事件被注册时。这意味着它可以用于在祖先元素下面尚不存在的项目。

备注：

我还更改了处理程序以仅查找和累积当前行。

我将TH元素更改为TD，TH仅用于表格标题。

remover代码也可以使用委托事件处理，因为基于属性的事件处理程序对于jQuery来说是一个非常糟糕的主意。

卸妆代码：

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

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

在动态生成的表行上相乘输入

1 个答案: