jquery - 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，但它仍然让我有些困惑。我意识到委派活动更有效率，但两者都不应该起作用吗？

score 1 · Accepted Answer

“我已经创建了 li 并将其附加到 ul 中。”

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

人们采取的另一条路线是在附加之前动态创建元素时直接附加事件。

例如：

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

score 1 · Accepted Answer

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。

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

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

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

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

score 0 · Accepted Answer

当你做这样的事情时：

$(SOME_SELECTOR).on(...

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

score 0 · Accepted Answer

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

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

4 回答 4