Question

我正在尝试删除通过输入文本并单击链接示例中的“添加另一个”链接生成的项目之一，但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/

Answer 1

试试这个：

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

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

要解决这个问题，可以使用 live() 功能。这确保了可以处理DOM中的当前和未来选择器。

Answer 2

http://jsfiddle.net/Cz4Cy/

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

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

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

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

Answer 3

您在执行脚本并且您的购物篮实际为空时绑定您的事件。

使用动态内容进行此类事件绑定的推荐方法是在父元素上使用 on（）和 off（）方法：

$('#basket').on('click', '.delLink', function(e) {
   alert('ohoy');
   $(this).closest('div').remove();
   e.preventDefault();
   return false; 
});

jquery无法从生成的内容中触发函数

3 个答案: