在foreach循环中添加onclick事件侦听器不起作用

Question

我在for循环中生成并添加html，然后尝试添加onclick事件，但由于某些原因，它无法在同一循环中工作：

items.forEach(item => {
itemHtml = `<div class="${item.id}">${item.id}</div>`;
$(".itemsWrapper").html($(".itemsWrapper").html() + itemHtml);
$(`.itemsWrapper > .${item.id}`).on("click", () => {
console.log(`${item.id} was clicked`);
});   
})

然而，如果我把它分成两个forEach循环，它会很好地工作：

items.forEach(item => {
itemHtml = `<div class="${item.id}">${item.id}</div>`;
$(".itemsWrapper").html($(".itemsWrapper").html() + itemHtml);
})
items.forEach(item => {    
$(`.itemsWrapper > .${item.id}`).on("click", () => {
console.log(`${item.id} was clicked`);
});   
})

Answer 1

如果单击最后打印的项目，控制台将显示消息。之所以会发生这种情况，是因为在第二次和下一次迭代中要用新的html替换html，所以事件处理程序就不见了。

items.forEach(item => {
itemHtml = `<div class="${item.id}">${item.id}</div>`;
// in this line, you're replacing the html from the previous iteration and, in
// consecuence, deleting the event handlers.
$(".itemsWrapper").html($(".itemsWrapper").html() + itemHtml);
// instead of the previous line, you can do something like this and it will work
// as expected
$(".itemsWrapper").append(itemHtml);
$(`.itemsWrapper > .${item.id}`).on("click", () => {
console.log(`${item.id} was clicked`);
});   
});

下面是一个带工作示例的代码笔：https://codepen.io/kmsdevnet/pen/wvzGYpg