javascript - JS 函数不适用于动态字段

Question

我有这个代码

function doCalc() {
var total = 0;
$('tr').each(function() {
    $(this).find('input.subtotal').val($('input:eq(1)', this).val() * $('input:eq(2)', this).val());
});
$('.subtotal').each(function() {
    total += parseInt($(this).val());
});
$('#precio').val(total);
}
doCalc();

$('tr input').on('keyup', function() {
doCalc();
});

https://jsfiddle.net/6ofbaLxb/3/

它是一个具有动态行的表，以及用于计算“keyup”上的值的js函数。但我有一个问题，该函数仅在编辑第一行时计算结果。它确实计算动态行的结果，但仅在编辑第一行时才计算。

我的 Js 知识非常基础，所以我在这里询问是否有人知道如何使其与动态行一起工作。

提前致谢。

Answer 1

尝试实现event-delegation在这里，

$('table').on('keyup','tr input', doCalc);

DEMO

<小时/>

该按钮不起作用，因为它没有 div 作为父级，它被 td 和 tr 包裹。所以尝试删除它。

$(wrapper).on("click", ".remove_field", function (e) {
   e.preventDefault();
   $(this).closest('tr').remove();
   x--;
});

DEMO