jquery - 如何在新添加的 DOM 上创建实时点击事件

Question

我是一个 live() 用户，我知道 live() 不知何故已被弃用。 我尝试使用bind()让新添加的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/

Answer 1

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

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

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

使用 .click() 或 .bind() 获得静态事件处理程序，该处理程序仅适用于代码最初运行时存在的对象。

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