1

我是 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/

4

3 回答 3

5

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

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

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

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

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

于 2012-04-10T06:54:19.623 回答
1

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

像这样：

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

​</p>

于 2012-04-10T06:50:53.197 回答
1

从 jQuery 1.7+ 开始live()，替换为on(). 文档页面提供live()了如何更新到较新方法的指南。

在您的情况下，这将转化为：

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

看到一个改变和工作的小提琴

于 2012-04-10T06:55:51.997 回答