1

我正在尝试删除通过输入文本并单击链接示例中的“添加另一个”链接生成的项目之一，但 jquery 不会从生成的内容中触发。如果我将事件处理程序附加到另一个对象，该函数会触发但不是从生成的链接触发，有什么方法可以解决这个问题？在下面的代码中；当用户单击带有类 delLink 的链接时，我希望该链接的周围 div 以及该 div 中的所有元素都被删除（删除）。

<div class="regItm">
    <input properties...><a class="delLink" properties...>X</a>
</div>
<div class="regItm">
    <input properties...><a class="delLink" properties...>X</a>
</div>
...
...

http://jsfiddle.net/KYkJn/2/

4

3 回答 3

3

尝试这个：

$('.delLink').live('click', function(){
    alert('ohoy');
    $(this).closest('div').remove();
});

由于您正在向 DOM 动态添加项目，因此您当前的功能（在页面加载状态下）不适用于它们。

为了解决这个问题，有live()函数。这确保可以处理 DOM 中的当前和未来选择器。

于 2012-10-23T23:01:41.277 回答
1

http://jsfiddle.net/Cz4Cy/

 $('body').on('click', '.delLink', function() {
     alert('ohoy');
     $(this).closest('div').remove();
 });

对于这种情况，您应该使用事件委托。这将允许您为尚不存在的元素添加事件处理程序。

http://api.jquery.com/on/

上面的代码仅用于说明目的。您应该避免在正文、文档或窗口上添加委托事件侦听器。而是将它们添加到您的容器中。

于 2012-10-23T23:13:27.890 回答
0

您在执行脚本并且您的购物篮实际上是空的那一刻绑定您的事件。

将此类事件与动态内容绑定的推荐方法是在父元素上使用on()和off()方法：

$('#basket').on('click', '.delLink', function(e) {
   alert('ohoy');
   $(this).closest('div').remove();
   e.preventDefault();
   return false; 
});
于 2012-10-23T23:12:10.180 回答