如何在ajaxComplete回调中获取更新后的DOM并绑定事件？

问题根源 #

• ajaxComplete是全局AJAX请求完成的回调，触发时机仅代表请求结束，此时业务代码中「处理响应、插入新DOM」的逻辑可能还未执行，你此时查询到的DOM仍是更新前的旧节点，自然绑定无效。
• 你原有写法仅会选中第一个<a>标签下的第一个.b类元素，就算DOM完成更新，新增的同类元素也不会被匹配到，还容易出现重复绑定、旧节点内存泄漏的问题。

最优解决方案：使用事件委托 #

不需要依赖ajaxComplete的触发时机，只要给不会被销毁的父容器（比如document，或者你确定不会被AJAX替换的上层容器）绑定一次事件即可，后续所有新增的符合规则的元素都会自动触发回调：

$(document).on('click', 'a .b', function(event) {
  console.log(event);
  return false;
});

注：把document换成你页面上包裹AJAX插入内容的最近的固定父容器，性能会更好

如果你必须在ajaxComplete中操作新DOM #

如果有特殊场景一定要在请求完成后处理更新后的DOM，首先要确认你的业务代码是在AJAX的success回调中完成DOM插入的（jQuery中success回调执行顺序早于全局ajaxComplete），可以调整选择器写法匹配所有新元素，也可以加极短的延迟兜底确保DOM已插入：

$(document).ajaxComplete((event, xhr) => {
  // 等待DOM插入完成，延迟可根据实际场景调整
  setTimeout(() => {
    // 选中所有符合条件的元素批量绑定，加off避免重复绑定
    $('a .b').off('click').on('click', function(event2) {
      console.log(event2);
      return false;
    });
  }, 0);
});

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