jQuery：.on（'click'，[selector]）仅在委托时有效

Question

我对jQuery很新。我已创建li并将其附加到ul。在li内，我有一个div包含一个按钮，点击该按钮会从li中删除ul。 基本上是：

<ul class="imageList">
  <li>Image</li>
  <li>Image1<div class="deleteImg"></div></li>
</ul>

当我委托事件时，我的.on('click')可以正常工作：

$('.imageList').on('click','.deleteImg', function() {
        $(this).parent().remove();
    });

但是，如果我从div中解雇它，那就不行了。

$('.deleteImg').on('click', function() {
        $(this).parent().remove();
    });

有人可以解释一下原因吗？我阅读了jQuery API，但它仍然让我感到困惑。我意识到委托事件更有效率，但不应该都有效吗？

Answer 1

“我正在创建并附加到ul。”

这只适用于委托的原因是因为在完成事件注册后技术上存在该元素。因此，您需要将事件委派出来，以便将其附加到给定选择器的所有新实例。

人们采用的另一种方法是在追加之前动态创建元素时直接附加事件。

例如：

var $d = $("<div>Hello</div>");
$d.click(function(){ alert("Hello"); });

Answer 2

  

委派事件的优势在于它们可以处理来自的事件   稍后添加到文档中的后代元素。

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

当您动态添加元素时 - 您需要委托像这样的事件 -

$('.imageList').on('click','.deleteImg', function() {
        $(this).parent().remove();
});

虽然这只是将事件附加到执行此时中存在于DOM 中的元素 -

$('.deleteImg').on('click', function() {
        $(this).parent().remove();
});

Answer 3

当你做这样的事情时：

$(SOME_SELECTOR).on(...

处理程序附加到与当时选择器匹配的所有元素。稍后创建的任何元素都不会自动获取附加的处理程序。

Answer 4

如果页面加载时.deleteImg不存在，.imageList确实存在，则会出现这种情况。

click事件在.deleteImg的所有祖先元素中冒泡，因此您可以在页面加载时存在的一个祖先上为该事件分配一个侦听器，在这种情况下为.imageList1。单击后代.deleteImg时，附加到祖先的侦听器会检测到该事件，并运行您使用.on()指定的匿名函数。