jQuery没有触发附加项目答案

【问题标题】：jQuery not triggering on appended itemjQuery没有触发附加项目
【发布时间】：2009-03-09 15:38:04
【问题描述】：

我在触发已添加到页面的项目上的事件时遇到问题。在下面的示例中，如果您单击 X，它将删除其中一项，但如果您添加一项，则无法将其删除。

这是列表：

<ul id="mylist">
    <li>Item 1 <a class="remove">X</a></li>
    <li>Item 2 <a class="remove">X</a></li>
</ul>
<a class="add">Add</a>

这是 jQuery：

$('.add').click(function(){ 
    $('#mylist').append('<li>Item 3 <a class="remove">X</a></li>');
});

$('.remove').click(function(){ 
    $(this).parent().hide('slow').remove();
});

任何人对此有所了解，我是否需要更新 dom 或其他东西才能让 jQuery 识别附加元素？

【问题讨论】：

标签： jquery html css

【解决方案1】：

您需要使用 jQuery 1.3 中新增的 live API

http://api.jquery.com/live/

如果您不能使用 1.3，则有一个用于 1.2 的 JQuery 插件，名为 LiveQuery，其工作方式类似。

【讨论】：

【解决方案2】：

啊，我前几天被这个咬了。您需要将事件绑定到页面加载时执行就绪处理程序后添加的所有新元素。有趣的是，有出色的jQuery Live Query plugin 处理一切。

【讨论】：

【解决方案3】：

这是正常行为。当您调用选择器（例如 $(".remove")）时，它会针对当前 DOM 执行。当您设置“删除”事件处理程序时，它将与现有项目（在您的示例中为 1 和 2）相关联，但不与之后创建的项目相关联。

幸运的是，jQuert 最近添加了一个新功能：live。它可以让你设置与之后添加的 DOM 元素相关的事件：

$('.remove').live("click", function(){ 
        $(this).parent().hide('slow').remove();
});

【讨论】：

【解决方案4】：

您正在尝试将事件处理程序绑定到不存在的元素类型。使用 jQuery 1.3+ 它有一个新的 $.live() 可以为尚不存在的元素设置事件处理程序

【讨论】：

【解决方案5】：

jQuery 1.3.x 支持“实时事件”：事件可以绑定到匹配选择器的当前和未来元素。您可以使用.live() 方法实现此目的。

【讨论】：

【解决方案6】：

虽然我建议使用最新版本的 jQuery，但您也可以在不使用“实时”事件的情况下执行此操作，方法是在所需命名空间中的某处创建事件并在使用完成之前将事件绑定到项目上。

var removeClickFunction = function(ev) {
    $(this).parent().hide('slow').end().remove();
    ev.preventDefault();
};
$('.remove').click(removeClickFunction);

$('.add').click(function(ev) {
    $('#mylist').append($('<li>Item 3 </li>').append($('<a class="remove" href="#">new remove</a>').click(removeClickFunction)));
    ev.preventDefault();
});

【讨论】：