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

我对jQuery非常新颖。我有li正在创建并附加到ul。里面li我有一个div包含一个按钮，点击后将从ul删除li。基本上是：jQuery：.on（'click'，[selector]）只在委托时有效

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

我.on('click')的作品时，我委托的情况下，像这样：

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

但如果我火了马上股利：

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

可能有人请解释一下为什么？我读了jQuery API，但对我来说还是有些困惑。我意识到委托事件更有效率，但不应该同时工作？

因为事件绑定代码运行时div不存在。 http://learn.jquery.com/events/event-delegation/ –

对象不存在...您可以{$（document）.on（'click'，'.deleteImg'）} –

“我已经创建并附加到ul。”

这将只与委托一起工作的原因是因为元素技术上存在于事件注册后。因此，您需要将事件委托出去，以便将其附加到给定选择器的所有新实例上。

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

例如：

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

2013-05-15 18:15:20

太棒了。谢谢！ – user1888521

委派事件具有的优点是它们可以处理来自被添加到文档在稍后的时间后代元素事件。

当你动态地添加你的元素 - 你需要委派事件是这样的 -

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

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

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

2013-05-15 18:15:49

当你做这样的事：

$(SOME_SELECTOR).on(...

处理程序连接到那个时候选择匹配的所有元素。之后创建的任何元素都不会自动获得附加的处理程序。

2013-05-15 18:16:01

这将会是这种情况如果.deleteImg在页面加载时不存在，但.imageList不存在。

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

2013-05-15 18:16:15 Faust

回答