jQuery动态生成的.test元素点击事件失效问题求助

这是个很常见的jQuery事件绑定坑，原因其实很好理解：你一开始用常规方式（比如$('.test').click(...)）绑定点击事件时，那些动态生成的.test元素还没被创建出来，DOM里根本找不到它们，所以事件压根没绑定到这些新元素身上，自然点击没反应啦。

给你两种靠谱的解决方案，都是利用事件委托的思路——把事件绑定到一个已经存在的父元素上，让父元素来监听子元素的点击事件：

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

这是目前jQuery官方推荐的事件委托写法，尽量绑定到离目标元素最近的静态父容器（不要直接绑到document，性能会更好），示例代码如下：

// 假设所有.test元素都在body里，你可以换成实际存在的父容器，比如$('#container')
$('body').on('click', '.test', function() {
  // 在当前点击的元素后面插入新的.test元素
  $(this).after('<div class="test">Book</div>');
});

原理是：点击事件会冒泡到父元素（这里是body），jQuery会检查触发事件的元素是否匹配.test选择器，如果匹配就执行回调函数——这样不管是页面初始的还是后来动态生成的.test元素，都能触发点击事件。

方法2：使用.delegate()方法（兼容老版本jQuery） #

如果你的项目还在使用jQuery 1.7之前的版本，可以用这个方法，逻辑和.on()类似：

$('body').delegate('.test', 'click', function() {
  $(this).after('<div class="test">Book</div>');
});

小提示：尽量避免把事件委托到document或body上，找一个在页面加载时就存在的、最靠近动态元素的父容器，能减少事件冒泡的层级，提升页面性能哦。

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