AJAX动态加载的DOM元素绑定事件失效的最优解决方案咨询

失效原因说明 #

你最初的写法$(".item").click(function() {})属于直接事件绑定，仅能作用于代码执行时已经存在于DOM树中的元素。AJAX请求是异步执行的，绑定逻辑运行时.item元素还未被追加到页面，因此绑定无效。

最优实现方案 #

你使用的是jQuery事件委托机制，完全不需要绑定到全局$body，可以选择离动态元素最近的、页面初始化时就存在的静态父容器作为委托对象，就是你代码中提前获取的.js-overview容器，既能规避全局选择器的问题，还能缩短事件冒泡路径，提升性能，是该场景的最优解。

各方案优劣势对比 #

• 方案1：绑定逻辑移入AJAX success回调
  代码示例：

  $.ajax({
      url: "URL",
      type: 'GET',
      success: function (data) {
          $(overview).append(data);
          // 元素追加完成后再直接绑定
          $(".item", overview).click(function() {
              // 执行逻辑
          })
      }
  });
  

  优劣势：无事件委托额外开销，但如果后续有其他逻辑会再次新增.item元素，需要重复执行绑定逻辑，处理不当容易出现事件重复绑定的问题。
• 方案2：最近静态父容器委托（推荐）
  代码示例：

  // 直接在绑定阶段委托给overview容器，不需要等AJAX返回
  overview.on('click', '.item', function () {
      // 执行逻辑
  });
  

  优劣势：不需要使用全局选择器，事件冒泡路径最短，性能最优，无论后续新增多少.item元素都能正常触发事件，无需重复绑定。
• 方案3：全局body/document委托（不推荐）
  就是你当前可用的写法，全局绑定的事件过多时，会导致所有点击事件都需要冒泡到顶层才会做匹配判断，容易出现性能问题和不同组件的事件冲突。

调整后完整代码示例 #

export default class overview {
    constructor(el) {
        this.loadOverview(el);
    }
    loadOverview(el) {
        const $this = $(el),
            overview = $('.js-overview', $this)
        // 提前绑定委托事件，不需要等AJAX返回
        overview.on('click', '.item', function () {
            // 你的业务逻辑
        })
        // Fetch content
        $.ajax({
            url: "URL",
            type: 'GET',
            success: function (data) {
                overview.append(data);
            }
        });
    }
}

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