动态更新后的.foo元素Click事件失效问题求助

这是个很常见的动态DOM元素事件绑定问题——你一开始给.foo绑定点击事件的时候，只有页面加载时已经存在的那个<td>元素会被绑定上事件；而通过AJAX请求后新生成的.foo元素，因为是在事件绑定之后才添加到DOM里的，所以没有被绑定上点击事件，自然触发不了。

解决这个问题的核心方法是事件委托，把事件绑定到一个始终存在的父级元素上，让它来监听子元素的事件。具体修改如下：

修改点击事件绑定代码 #

把原来的点击事件脚本替换成下面这段：

// 绑定到tbody（页面加载时就存在的父元素），监听子元素.foo的点击
$('#tbl tbody').on('click', '.foo', function(){
  window.open('url', '_blank');
});

原理说明 #

事件委托利用了DOM的事件冒泡机制：

• 当你点击动态生成的.foo元素时，点击事件会向上冒泡到它的父级tbody（这个元素从页面加载就存在，所以绑定的事件一直有效）。
• jQuery会检查触发事件的源元素是否匹配.foo选择器，如果匹配，就执行你定义的回调函数。

这样不管后续通过AJAX生成多少个新的.foo元素，它们的点击事件都能被正确触发。你的AJAX更新部分的代码不需要做任何改动，保持原样即可。

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