document.querySelectorAll无法为动态生成HTML元素绑定点击事件

• 事件绑定代码执行时机早于动态元素渲染：初始页面加载时就执行了document.querySelectorAll('.icon-xmark')查找元素绑定事件，但此时createFilterBubblesTemplate函数还未运行，所有带icon-xmark类的关闭按钮都是后续通过jQuery的.html()方法动态插入DOM的，初始查询根本无法选中这些还未生成的节点，自然无法绑定上点击事件。
• 代码存在规范性问题：每个动态生成的关闭按钮都使用了相同的id="bubbles-close"，HTML标准要求id属性在全页面唯一，重复id会引发DOM选择、事件触发的异常，建议移除该重复id，或替换为动态生成的唯一id值。

方案1：事件委托（优先推荐） #

事件委托利用DOM事件冒泡的机制，将事件绑定到动态元素始终存在的静态父节点上（比如示例中的#filtered-items容器，该容器在页面初始加载时就已存在），无需关心子元素的渲染时间，后续新增的动态子元素触发点击时都会冒泡到父节点响应事件，一次绑定永久生效，无需重复操作。

原生JS实现代码：

// 页面初始加载时即可执行，不需要等动态元素渲染
document.querySelector('#filtered-items').addEventListener('click', (event) => {
  // 校验点击的目标是否为目标关闭按钮
  if (event.target.classList.contains('icon-xmark')) {
    console.log('关闭按钮被点击', event)
    // 直接读取按钮上的自定义属性
    const filterId = event.target.dataset.filterId
    const filterSection = event.target.dataset.filterSection
    // 后续写删除对应筛选条件的逻辑即可
  }
})

如果使用jQuery，事件委托写法更简洁：

$('#filtered-items').on('click', '.icon-xmark', function() {
  console.log('关闭按钮被点击')
  const filterId = $(this).data('filter-id')
  const filterSection = $(this).data('filter-section')
})

方案2：元素渲染完成后再绑定事件 #

如果不想使用事件委托，可以把事件绑定的逻辑移动到动态元素插入DOM的操作之后，等节点真实存在于页面中时再执行查询绑定：

const createFilterBubblesTemplate = (obj) => {
  let bubbles = ''
  obj.forEach(e => {
    // 已移除重复的id="bubbles-close"，避免id冲突
    bubbles += `<div class="filter-btn">
    <span>${e.label}</span>
    <span class="icon-xmark" data-filter-id="${e.id}" data-filter-section="${e.section}"></span>
    </div>`
  })
  $("#filtered-items").html(bubbles);

  // 节点插入完成后再查询绑定事件
  document.querySelectorAll('.icon-xmark').forEach(item => {
    // 先清空已有点击事件，避免重复渲染导致事件多次绑定触发
    item.onclick = null
    item.addEventListener('click', (event) => {
      console.log(event)
    })
  })
}

注意：该方案每次重新渲染筛选气泡都要重新执行一次查询和绑定，性能和可维护性都弱于事件委托方案，非特殊场景不推荐使用。

内容的提问来源于stack exchange，提问作者Zalizan Zolkipali