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

Question

我正在.item使用 Javascript 创建一个元素，然后我想通过单击将其删除。为什么不.click()工作？

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

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

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

Answer 1

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

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

也请参阅这个问题：为什么不将 Javascript 事件委托发挥到极致？

Answer 2

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

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

当您使用$(document).on('click','.item',function() {});注册点击事件处理程序时，它使使用事件传播工作。在 dom 事件结构中，来自元素的事件将被冒泡到文档对象。id 如果单击一个元素，则附加到它的单击处理程序及其父元素将被触发，除非事件传播被阻止。因此，在此方法中，单击事件处理程序已注册到document对象，因此当来自元素的单击事件冒泡到文档对象时，它在这种情况下使用传递的过滤器测试事件源元素（或其父元素），.item这是真的然后执行处理程序

Answer 3

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

另一种解决方案

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