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"。

Answer 2

您需要使用jQuery的on() method

赞so：

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

Answer 3

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

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

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

查看 altered & working fiddle

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

3 个答案: