jQuery重载div后addEventListener事件失效的原因及解决方法

核心原因是DOM节点被整体替换：你通过addEventListener给初始加载的#here元素绑定事件时，监听器是挂载在当时存在的那个旧DOM节点上的。而jQuery的.load()方法执行局部刷新时，会把目标位置的原有DOM节点替换成从服务端拉取的新DOM节点，旧节点被删除时挂载在它上面的事件监听器也会随之销毁，新生成的#here节点没有绑定过任何点击事件，自然不会触发响应。

有两种常用处理方案，优先推荐第一种：

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

把事件绑定到始终不会被刷新替换的祖先节点上（比如document，或者#here外层不参与局部重载的容器元素），利用事件冒泡的机制判断触发源，执行对应逻辑。这种方案只需要绑定一次，后续不管#here怎么刷新替换都不需要重新绑定，维护成本最低。
原生JS实现示例：

// 绑定到始终存在的document节点，也可以换成#here的静态父容器
document.addEventListener('click', (e) => {
  // 判断点击的目标是否是#here元素
  if (e.target.id === 'here') {
    alert("hello world !")
  }
})

如果用jQuery实现更简洁：

$(document).on('click', '#here', () => {
  alert("hello world !")
})

方案2：每次重载完成后重新绑定事件 #

jQuery的.load()方法支持传入加载完成的回调函数，你可以在回调里给新生成的#here节点重新绑定点击事件。
示例代码：

function updateDiv() {  
  $( "#here" ).load(window.location.href + " #here", function() {
    // DOM重载渲染完成后，重新给新的#here节点绑定事件
    document.getElementById("here").addEventListener("click", () => { 
      alert(" hello world !") 
    })
  }); 
}

这种方案需要每次刷新后重复执行绑定逻辑，适合刷新频率极低、事件逻辑和节点上下文强绑定的场景。

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