jQuery动态新增元素点击事件失效，无刷新场景如何重新初始化DOM

当前写法是把点击事件直接绑定到脚本加载完成时、已经存在的带classname类的元素上。这种直接绑定逻辑不会追踪后续DOM变化，等Rails的js.erb渲染出新增的同类元素时，当初的绑定流程已经执行完毕，这些新元素自然无法触发预先绑定的点击事件。

• 采用事件委托写法替代直接绑定，利用DOM事件冒泡的特性，把事件绑定到页面加载时就存在、不会被动态渲染替换的父级节点上。最稳妥的绑定目标是document，哪怕后续替换掉所有业务区域的DOM，绑定逻辑也不会失效。
  修正后的示例代码：

  $(document).ready(function() {
    // 把目标元素选择器放到on()的第二个参数，由上层父节点代理匹配子元素的事件
    $(document).on("click", '.classname', function(e) {
      // 原有业务逻辑保持不变
    });
  });
  

• 这种写法不需要额外“通知JS识别新增DOM”：事件冒泡到绑定的父级时，会实时检查当前点击的元素是否匹配选择器。不管元素是页面初始化时就存在的，还是之后通过js.erb动态渲染出来的，只要匹配选择器就能正常触发对应逻辑。

• jQuery官方不存在类似$.reinit()的现成全局方法。事件委托的设计本身就是为了从根源解决动态DOM的事件绑定问题，根本不需要反复重新初始化绑定逻辑。
• 不要采用“每次js.erb渲染完DOM后，就重新执行一遍初始绑定代码”的方案：这种写法不仅冗余，还会因为重复给同一个元素绑定事件，导致单次点击触发多次业务逻辑，很容易出现异常。

• 当前通过update.js.erb调用<%= j render partial: '...' %>完成的DOM更新，完全不需要在渲染逻辑里添加额外的“告知JS存在新元素”的代码，只要提前完成事件委托的绑定，后续不管渲染多少个带classname类的元素，点击事件都能正常生效。
• 如果页面元素总量特别大，绑在document上的事件委托存在性能损耗，可以把绑定的父节点换成动态渲染区域附近、静态存在的容器，缩小事件匹配的检查范围，实际生效效果和绑在document上完全一致。

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