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

我是live（）用户，我知道live（）已被弃用。我试图用bind（）在新增加的dom上运行事件，但事实并非如此。如何在新添加的DOM上进行实时点击事件

你能告诉我如何正确地做bind（）吗？还是有任何其他方法来完成这项任务？

这是HTML：

<table> 
    <tr> 
     <td> hi there <span class="click">click me</span></td> 
    <tr> 
    <tr> 
     <td> hi there2 <span class="click">click me</span></td> 
    <tr> 
    <tr class="end"> 
     <td></td> 
    </tr> 
</table> 
<button class="add_new">add new row</button>

这是JS：

var new_row = '<tr><td> hi there, new row! <span class="click">click me</span></td><tr>'; 

$('.add_new').click(function() { 
    $('.end').before(new_row);  
}); 


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

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

来源

2012-04-10 bondythegreat

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

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

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

使用.click()或.bind()可以获取仅处理代码最初运行时出现的对象的静态事件处理函数。

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

来源

2012-04-10 06:54:19 jfriend00

感谢jfriend00和所有。这是你添加的非常有用的提示。值得注意的 – bondythegreat 2012-04-10 07:03:44

你需要使用jQuery的on() method

像so：

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

来源

2012-04-10 06:50:53 neoascetic

从jQuery 1.7+开始，live()被替换为on()。文档页面为live()有指导如何更新到更新的方法。

在你的情况下，将转化为：

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

看到altered & working fiddle

来源

2012-04-10 06:55:51 m90

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

回答

相关问题