如何在新添加的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
});

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

使用.click()或.bind()获取静态事件处理程序,这些处理程序仅对最初运行代码时存在的对象起作用.

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