如何为要捕获的javascript点击事件选择多个元素？

Question

我有这个HTML：

<div id="outsideContainer">
<ul>
<li>Hello</li>
<li>Goodbye</li>
</ul>
</div>

使用jQuery，如何点击任何这些元素执行某个功能？

我有这个，但它不起作用：

$('#outsideContainer').click(function() {
//do stuff
});

有什么想法吗？

Answer 1

在大多数情况下，这很好。可能的原因不起作用：

1. 您在“outsideContainer”元素存在之前执行JavaScript，例如：

   ...
   <script>
   $('#outsideContainer').click(function() {
   //do stuff
   });
   </script>
   <div id="outsideContainer">
   <ul>
   <li>Hello</li>
   <li>Goodbye</li>
   </ul>
   </div>
   

   该元素必须在调用脚本时存在。只需将script块放在页面的最末端，就在结束body标记之前，或者将代码包装在传递给jQuery的ready函数的函数中。

2. 您希望回调中的this引用li元素;实际上，它将引用“outsideContainer”div，因为这是事件处理程序所连接的内容。您可以通过li

   获取event.target元素

   $('#outsideContainer').click(function() {
       // here, this is the raw "outsideContainer" element
       // and event.target is the raw element that was clicked
   });
   

   请注意，根据您的边距和填充，event.target可能是ul元素，如果您在ul内但未在li内点击。

其他可能值得关注的事情：

• delegate - 在一个容器上挂钩一个事件，但让jQuery根据点击的孩子过滤你得到的事件。
• live - 基本上是文档范围delegate。

Answer 2

只有在点击整个div时才会触发。

$('#outsideContainer').click(function() {
    //do stuff
});

要抓住每个人li的点击，请执行以下操作：

$('#outsideContainer ul li').click(function() {
    //do stuff
});

Answer 3

如T.J所述。克劳德，你有什么作品，但你想要了解this的背景。将event.target替换为this将为您提供已点击的实际元素。

作为演示，我在下面提供了一个小提琴，它将提示点击元素的节点（标签）类型和文本内容。 <div>，<ul>和<li>都有不同的彩色边框，可帮助您直观地确定实际点击的内容。

Live demo ->

Answer 4

$('outsideContainer ul li').click(function() {
//stuff
});

Answer 5

我没有包含实际导致问题的javascript（它位于//do stuff，但我遇到的问题是我正在寻找event.target只是outsideContainer而不是{ {1}}和ul s。