$('body').click('li', func) Vs $('li').click(func)，第二个选项不起作用？

$('body').click('li', func) Vs $('li').click(func), Second option does not work? 

$('body').click('li', function(){
  console.log('clicked - handler 1')
})
$('li').click(function(){
  console.log("clicked - handler 2")
})

我正在使用两种不同的选择器机制向 li element 的点击事件添加两个处理程序。当我点击元素时， 控制台日志说，

clicked - handler 1

这意味着，根本没有添加第二个处理程序。直接选择li element而不是选择body and then li有什么问题？

第二个选项在其中一种情况下可能不起作用：

  1. "li" 元素是动态添加到页面中的，而不是在页面加载时添加的（换句话说，当执行选择器时，当时没有匹配的元素）。
  2. 您发布的代码在 DOM 完全加载之前执行（例如，放置在简单的 <script> 标记中）。

如果是第二个，试试这个：

$(function() {
   $('li').click(function(){
     console.log("clicked - handler 2")
   })
});

这段代码会在DOM加载后执行，因此$('li')选择器会成功。

第一个选项有效，因为 "body" DOM 元素提前可用，因此您成功地将事件处理程序附加到它（第二个选择器仅充当事件目标的过滤器，但实际处理程序附加到"body").