Javascript 在动态生成的表行上增加输入

我正在尝试动态生成表行，并使用它们进行数学解析。但这些值的更新不起作用。 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>

它只对第一行有效，而不是生成的一行。顶部行上的任何更改都会更新所有行，但这不是我们想要的。 任何潜在客户？

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

JSFiddle:

e、 g

文档

是默认值，如果没有其他更接近，那么在您的情况下可能使用

#tabela lotes

：

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

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

注意事项：

• 我还将处理程序更改为仅查找和累加当前行
• 我将

  TH

  元素更改为

  TD

  ，因为

  TH

  仅用于表格标题

• remover

  代码也可以通过委托事件处理，因为基于属性的事件处理程序在jQuery中是一个非常糟糕的主意

删除程序代码：

JSFiddle:

---

问：为什么要添加更多的表头而不是TDs？@Ícaro Abreu：做了一些修改并提供了一个JSFIDLE。享受。

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

}  

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

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

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