Ajax加载内容中jQuery脚本失效，如何用delegate/on绑定事件？

这问题我之前做项目时也踩过坑！核心原因就是动态加载的元素（也就是#results容器里的内容）在页面初始化时还没生成，你原来直接绑定事件的方式只能作用于当时已经存在的DOM元素，自然对后来Ajax加载的内容无效。用事件委托就能完美解决这个问题，下面给你两种具体实现方式：

使用.on()方法（推荐，jQuery 1.7+） #

从jQuery 1.7开始，.on()方法统一了事件绑定的API，是官方推荐的事件委托写法。它的思路是把事件绑定到一个页面加载时就存在的静态父元素上，然后让这个父元素把事件“委托”给后来动态生成的目标元素。

举个例子，假设你原来的无效代码是直接绑定动态元素：

// 原来的写法：仅对页面初始化时存在的元素生效
$('#results .btn').click(function() {
  // 你的业务逻辑
});

改成事件委托的正确写法：

// 推荐：绑定到离目标元素最近的静态父元素（比如#results本身如果是静态的）
$('#results').on('click', '.btn', function() {
  // 这里写你的业务逻辑，比如：
  alert('动态加载的按钮被点击啦！');
  // 其他操作，比如获取当前元素：$(this)
});

如果#results本身也是动态生成的，那就找更上层的静态元素，比如document：

$(document).on('click', '#results .btn', function() {
  // 你的逻辑
});

使用.delegate()方法（兼容jQuery 1.4.2 - 1.6） #

如果你项目里用的是比较旧的jQuery版本（1.4.2到1.6之间），可以用.delegate()方法，它是早期的事件委托实现，原理和.on()一致，只是写法顺序不同：

// 写法：父元素.delegate(目标选择器, 事件类型, 处理函数)
$('#results').delegate('.btn', 'click', function() {
  // 你的业务逻辑
});

// 或者用document作为父元素
$(document).delegate('#results .btn', 'click', function() {
  // 你的逻辑
});

几个关键注意点： #

• 用来绑定事件的父元素必须是页面初始化时就存在的静态DOM元素，不能是动态生成的，否则委托会失效
• 目标选择器要精准定位到你需要绑定事件的动态元素，避免不必要的事件触发
• 尽量选择离动态元素最近的静态父元素，减少事件冒泡的层级，提升页面性能

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