click事件侦听器仅适用于从mongoDB和node.js生成的第一个列表项

Question

我正在从mongoDB获取记录，并将它们显示在无序列表中。我给了删除链接一个保存产品ID的数据ID。现在，我只是在单击按钮时提醒ID。但是由于某种原因，只有在我单击第一项时才会弹出警报。如果之后单击任何项​​目，则什么也没有发生，并且控制台没有错误。

hashCode()

Answer 1

如果要为许多动态生成的元素创建事件侦听器，则应使用委托的事件侦听器：

document.body.addEventListener('click', event => {
  if (!event.target.matches('.delete')) return;

  const btn = event.target;
  const productId = btn.dataset.id;

  event.preventDefault();
  alert(productId);
});

您应该使用body匹配的所有元素中最直接的祖先，而不是.delete，这样您就不会浪费时间为许多无关的点击事件运行处理程序。

参考文献：

• matches()
• dataset