EventListener的复选框不能正常工作

Question

我通过这个循环创建了很多复选框，我希望当一个复选框被点击时，显示"未显示"，";转向"展示";我用的是object。on()这里object是表的类，但当我点击一个复选框时，复选框不仅不勾选，它还会持续触发这个函数，单词不会改变，而是控制台。日志"Clicked"上百次。然后程序中断。有人知道为什么吗?谢谢你。

data.forEach((row) => {
myTable += "<tr>" + "<td>" + `<label id="label" ><input type="checkbox"><span> Not showing</span></label>` + "</td>"+ "<td>" + row.name + "</td>" + "<td>" + app.nations[row.nation] + "</td></tr>"
$('.table-sticky-container').on('click', 'label', function() {
console.log("Clicked");
var checked = $('input').is(':checked');
$('span').text(checked ? ' Showing' : ' Not showing');
});
});

Answer 1

问题是每次迭代循环时都要在ALL.table-sticky-container上创建一个新的侦听器。最重要的是，你告诉jQuery检查所有的input元素，看看他们是否被检查。

你应该做的是把你的事件委托放在循环之外，并为你的逻辑使用相对路径，像这样

// set the delegate
$('.table-sticky-container').on('click','label', function() {
let txt = $(this).find('input[type=checkbox]').prop('checked') ? "Showing" : "Not showing";
$(this).find('span').html(txt);
})