在追加的项目上不触发jQuery

Question

在已添加到页面的项目上触发事件时遇到问题。在下面的示例中，如果您单击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识别附加的元素？

Answer 1

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

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

如果你不能使用1.3，有一个名为LiveQuery的1.2版的JQuery插件，它的工作原理与此类似。

Answer 2

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

Answer 3

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

幸运的是，最近向jQuert添加了一个新函数：live。它将允许您设置与随后添加的DOM元素相关联的事件：

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