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/

它是一个包含动态行的表，而js函数用于计算＆＃34; keyup＆＃34;的值。但我有一个问题，该功能只在编辑第一行时计算结果。它确实从动态行计算结果，但仅在编辑第一行时计算。

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

Answer 2

从jsfiddle的代码中，我注意到了

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

在页面加载时加载，并且不会影响较新的输入标记添加相同的行

$(add_button).click(function(e)

注意这里的区别 https://jsfiddle.net/v27onw78/

关于使用＆＃34; borrar＆＃34;删除的问题，请尝试

$(this).parents('tr').remove();

问题出现了，因为你没有在父母的标签中使用div标签＆＃34; borrar＆＃34;

同样可以在这里找到

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

JS函数不适用于动态字段

2 个答案:

DEMO

DEMO