addEventListener绑定click事件仅触发一次，需刷新才可再次触发如何解决

核心问题原因 #

• 仅修改了从localStorage读取到的内存临时数组，没有将更新后的数据回写到localStorage，下次触发点击时读取的依旧是修改前的旧数据，所以看起来累加只生效了一次
• 修改数据后未同步更新页面上的数量展示，就算数值改了视觉上也看不到变化
• 若购物车按钮是动态渲染的元素，页面首次加载时绑定的点击事件会在列表重新渲染后失效，也会导致后续点击无响应

修复后的代码 #

// 推荐用事件委托绑定点击事件，兼容动态生成的按钮，不需要依赖load事件
document.addEventListener("click", function(e) {
  // 替换成你自己的加数量按钮的类名
  if (e.target.classList.contains("amount_btns_up")) {
    const id = e.target.dataset.amount;
    amount_change_up(id);
  }
});

function amount_change_up(id) {
  // 读取购物车数据，加空数组兼容本地没有数据的情况
  const mycart = JSON.parse(localStorage.getItem("myCart")) || [];
  for (let j = 0; j < mycart.length; j++) {
    if (mycart[j].ISBN === id) {
      mycart[j].amount++;
      // 同步更新页面上的数量显示，选择器替换成你项目里对应数量展示元素的规则
      document.querySelector(`[data-amount-id="${id}"]`).textContent = mycart[j].amount;
      break; // 找到对应商品后直接跳出循环，减少不必要的遍历
    }
  }
  // 把修改后的购物车数据回写到localStorage
  localStorage.setItem("myCart", JSON.stringify(mycart));
}

补充说明 #

如果你的按钮都是静态渲染不需要动态生成，也可以保留原有的load事件绑定逻辑，只需要在原有代码基础上补充localStorage回写、页面视图更新的代码即可。

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