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的新实时API

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

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

Answer 2

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

Answer 3

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

幸运的是，最近在jQuert中添加了一个新功能：live。它将允许您设置与之后添加的DOM元素相关联的事件：

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

Answer 4

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

Answer 5

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

Answer 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();
});

jQuery不会触发附加项

6 个答案: