替换onClick为addEventListener实现列表项删除仅刷新后生效如何修复

问题原因 #

你当前的事件绑定逻辑仅会在代码首次执行时，给当时存在的删除图标绑定点击事件。每次调用render()重绘列表时，旧的列表DOM节点会被全部替换为新生成的节点，之前绑定的事件监听器会随旧节点销毁而失效，新生成的删除图标没有绑定任何点击事件，因此点击无响应，只有刷新页面重新执行绑定逻辑才能恢复正常。

修复方案 #

方案1：每次渲染后重新绑定事件 #

将事件绑定逻辑封装为独立函数，每次render()执行完成后调用该函数重新绑定事件即可：

// 抽离事件绑定逻辑为独立函数
function bindRemoveEvent() {
  const removeBtns = document.querySelectorAll(".remove"); 
  Array.from(removeBtns).forEach(el => {
    el.addEventListener('click', () => { 
      // 注意getAttribute返回字符串，需转为数字避免splice异常
      const index = Number(el.getAttribute('data-index'));
      list.splice(index, 1);
      localStorage.setItem('list', JSON.stringify(list));
      render(list);
      // 渲染完成后重新绑定事件，也可以直接把这行放到render函数末尾
      bindRemoveEvent();
    })
  })
}

// 首次渲染后调用绑定函数
render(list);
bindRemoveEvent();

方案2（更推荐）：使用事件委托 #

直接将点击事件绑定在列表的父容器上，利用事件冒泡机制处理所有删除图标的点击，仅需执行一次绑定，后续无论怎么重绘列表都能正常触发逻辑，性能也优于逐元素绑定：

// 请将选择器替换为你实际使用的列表父容器的选择器
document.querySelector('#list-container').addEventListener('click', e => {
  // 仅处理删除图标的点击事件
  if (e.target.classList.contains('remove')) {
    const index = Number(e.target.dataset.index);
    list.splice(index, 1);
    localStorage.setItem('list', JSON.stringify(list));
    render(list);
  }
})

该方案只需在页面初始化时执行一次即可，无需后续重复绑定。

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