更新HTML按钮后addEventListener绑定点击事件不生效问题求助

首次页面加载完成后，你仅对当时已存在的.update--btn元素绑定了点击事件。当你执行cartUpdate.innerHTML = ''清空容器时，原有绑定了事件的按钮元素被销毁，对应事件绑定也同步失效。后续新插入的.update--btn是全新生成的DOM节点，从未绑定过点击事件，因此二次点击无响应。

优先推荐使用事件委托的方式实现，无需每次新增元素后重复绑定事件，性能更优、适配所有动态生成的目标元素：

// 删除原有遍历绑定事件的代码，替换为以下内容
// 建议将document替换为页面中不会被动态删除的、离按钮最近的父级容器，可提升事件触发效率
document.addEventListener('click', function(e) {
  // 匹配点击目标为按钮元素时触发逻辑
  if (e.target.classList.contains('update--btn')) {
    // 修正this指向，保证原有逻辑中this指向触发点击的按钮
    clickBtn.call(e.target);
  }
})

如果场景简单仅少量动态元素，也可选择每次生成新按钮后手动重新绑定事件，修改xhr.onload逻辑即可：

xhr.onload = () => {
    let cartUpdate = this.closest('.update');
    cartUpdate.innerHTML ='';

    let cartUpdateInner = document.createElement('div');
    cartUpdateInner.innerHTML = '<button type="button" class="update--btn">+</button>'
    // 给新生成的按钮绑定点击事件
    const newBtn = cartUpdateInner.querySelector('.update--btn');
    newBtn.addEventListener('click', clickBtn);
    cartUpdate.appendChild(cartUpdateInner);
}

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