$（'body'）。click（'li'，func）Vs $（'li'）。click（func），第二个选项不起作用？

Question

$('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？

有什么问题

Answer 1

第二种选择可能不适用于其中一种情况：

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

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

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

此代码将在加载DOM后执行，因此$（'li'）选择器将成功。

第一个选项有效，因为“body”DOM元素早期可用，因此您成功地将事件处理程序附加到它（第二个选择器仅用作事件目标的过滤器，但实际处理程序附加到“body”）。