javascript - jQuery 更改不适用于动态添加的 2 个部分

Question

我有一堆 js 代码可以更容易地完成，但不确定如何。

问题是我正在使用 2 个计算器来计算值...

一个在拖放可用时处于事件状态，然后在移动分辨率下被禁用...第二个仅在移动分辨率下处于事件状态。

无论如何我有这个:

items = ['item 22', 'item 23']
output = []
for (var i = 0; i < items.length; i++) {
    output.push('<p>' + items[i] + '<input class="total-items" value="0" />' + '</p>');
}
$('#total-elements').html(output.join(""));
$(".total-items").change(function(e) {
    calculateTotal();
});

和(区别在于下面这个输入部分有 onClick() )

c = ['item 1','item 2', 'item 3']
o = []
for (var i = 0; i < c.length; i++) {
    o.push('<p>' + c[i] + '<input class="total" value="0" />' + '<a href="#" class="remove-link" onClick="deleteRecord(' + i + ');" class="delete-item">x</a></p>');
}
$('#total').html(o.join(""));
$(".total").change(function(e) {
    calculate();
});

代码放在文档里面就绪...问题在于那个 onClick 部分，如果那个 (deleteRecord()) 函数被放置在准备好的文档中，那么它就不起作用(我得到 ReferenceError: 'functionName' not defined... 当我将它放在准备好的文档之外，然后我需要移动其他一些部分才能使其正常工作，但是现在，当我单击以从列表中删除一个项目时，它会删除它，这没关系，但是如果我尝试添加要使用的值计算器它不会计算它们，因为 .change() 根本不会触发......

如果在准备好的文档之外这样添加它，

$(document).change(".total", function(e) {
  calculate();
});

然后放置在 document ready 中的 calculateTotal() 将不起作用...

所以我不确定如何让它们都工作...

有什么建议吗？

谢谢。

Answer 1

.change() doesn't trigger at all...

那是因为您的输入 .total-items和 .total由 javascript 动态添加到 DOM，因此您必须使用事件委托(delegate) on() :

$("body").on("change", ".total", function(e) {
     calculate();
});

$("body").on("change", ".total-items", function(e) {
     calculateTotal();
});

希望这对您有所帮助。