Question

我正在使用Javascript创建.item元素，然后我想通过点击删除它。为什么.click()不起作用？

$('.item').click(function() {
    $(this).remove();
});

工作解决方案（为什么它有效？为什么我们不总是使用它而不是.click()？）：

$(document).on('click','.item',function() {
    $(this).remove();
});

Answer 1

$('.item')在您使用该选择器调用jQuery构造函数时返回类item的所有元素。然后，将事件处理程序附加到它们中的每一个。它不是为了考虑新元素而设计的。

事件委托语法将点击处理程序绑定到document并处理所有点击事件。如果事件的目标是与您的选择器（.item）匹配的元素，则接受该事件。

也可以看到这个问题：Why not take Javascript event delegation to the extreme?

Answer 2

原因可能是.item元素是动态添加的

当你使用$('.item').click(..)时，它只将点击处理程序绑定到那个时刻存在于dom中的那些元素，因此如果在执行此语句后添加了一个元素，则单击处理程序将不会附加到新元素。

当您使用$(document).on('click','.item',function() {});注册Click事件处理程序时，它会使用事件传播。在dom事件结构中，元素中的事件将冒泡到文档对象。 id如果单击某个元素，则附加到它的单击处理程序及其父元素将被触发，除非阻止事件传播。所以在这个方法中，click eveht处理程序被注册到document对象，所以当一个元素的click事件被冒泡到文档对象时，它会测试事件源元素（或其父元素）中传递的过滤器大小写.item，然后执行处理程序

Answer 3

因为元素是在页面加载后动态创建的......

另一种解决方案

$('body').delegate('.item','click',function() {
    $(this).remove();
});

jQuery / Javascript，两个点击解决方案，但只有一个有效

3 个答案: