点击动态按钮时addEventListener绑定的click回调未触发是什么原因

问题原因 #

• DOMContentLoaded 事件仅在页面初始HTML加载解析完成时触发，你动态生成的 .delete-btn 按钮此时还没有被插入到DOM树中，getElementsByClassName 只能拿到空集合，没有给任何按钮成功绑定点击事件，点击自然无法触发回调。
• 逐个绑定的方案本身不适合动态元素，后续新增的删除按钮还需要重复绑定，容易出现遗漏。

解决方案 #

推荐使用事件委托实现，把事件绑定到始终存在的上层父元素（比如todo列表的容器，也可以直接用document兜底），通过事件冒泡机制识别触发源，动态生成的元素也能正常触发逻辑，不需要单独给每个按钮绑定：

document.addEventListener('click', (e) => {
  // 仅当点击的是删除按钮时才执行逻辑
  if (e.target.classList.contains('delete-btn')) {
    deleteTodo(e.target)
  }
})

const deleteTodo = (btn) => {
  console.log("inside function");
  // 移除父元素的逻辑示例：btn.parentElement.remove()
}

如果你一定要用原有逐个绑定的写法，需要在每次动态生成删除按钮、插入到DOM之后，单独给新生成的按钮绑定click事件即可。

内容的提问来源于stack exchange，提问作者Oz Shurki