如何在新添加的DOM上进行实时点击事件

我是一个live（）用户，我知道不知何故live（）已被弃用。 我已经尝试使用bind（）在新添加的dom上运行事件，但事实并非如此。

你能告诉我怎么做bind（）吗？ 或者还有其他方法来完成这项任务吗？

这是html：

 
 
 hi there click me
 
 
 
 hi there2 click me
 
 
 
 
 
 add new row 

这是js：

 var new_row = ' hi there, new row! click me'; $('.add_new').click(function() { $('.end').before(new_row); }); $('.click').bind('click', function() { alert('clicked'); }); 

如果可能的话，我想使用本机jquery的方法而不是插件。 这是我的jsfiddle http://jsfiddle.net/bondythegreat/z3uXH/

Answer 1

您需要使用jQuery的.on()或.delegate()的动态版本。

 $('table').on('click', '.click', function() { // your code here }); 

对于使用委托事件处理的动态行为，基本思想是第一个select（在jQuery对象中）必须是在安装事件处理程序后不动态创建的静态父对象。 作为第二个参数传递给.on（）的第二个选择器是一个选择器，它匹配您希望事件处理程序所在的特定项。 安装事件处理程序后，可以动态创建这些项。

使用.click()或.bind()可以获得静态事件处理程序，它们只对最初运行代码时出现的对象起作用。

为了使这段代码更健壮，我建议两件事。 首先，不要使用像“点击”这样的类名，这很容易与事件混淆。 其次，在您的表上放置一个id，以便可以在第一个选择器中引用ID，而不是可能在页面中的其他表上意外激活的非常通用的"table" 。

Answer 2

你需要使用jQuery的on()方法

像这样 ：

 $('table').on('click', '.click', function() { alert('clicked'); }); 

Answer 3

从jQuery 1.7+开始， live()被on()取代。 live()的doc页面提供了如何更新到更新方法的指南。

在您的情况下，将转换为：

 $('table').on('click','.click', function() { alert('clicked'); }); 

看到改变和工作的小提琴