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

Question

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

<% for (const products of pending) { %>
 <li>
    <a href="#" class="button gray delete" data-id="<%= products._id %>"><i class="sl sl-icon-close"></i> Delete</a>
 </li>
<% } %>
<script>
    const deleteBtn = document.querySelector('.delete');
    const productId = deleteBtn.getAttribute('data-id');
    document.querySelector('.delete').addEventListener('click', e => {
        e.preventDefault();
        alert(productId);
    });
</script>

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