在 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 替换为新的，因此您的事件处理程序消失了。

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

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

Adding onclick event listener within a foreach loop not working

javascript

jquery

onclick