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

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 ，因为这是事件处理程序所依赖的。 您可以通过event.target获取li元素：

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

   请注意，如果您在ul但未在li上单击，则取决于您的边距和填充， event.target可能是ul元素。

其他可能值得一看的东西：

• delegate -将事件挂在容器上，但让jQuery根据单击的子项来过滤得到的事件。
• live -文件基本上全delegate 。

Answer 2

仅当您单击整个div时才会触发。

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

要捕捉点击每一个人li做：

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

Answer 3

正如TJ克劳德指出，你有什么作品，但是你会想知道的情况下的this 。 将event.target替换为this将为您提供被单击的实际元素。

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

现场演示->

Answer 4

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

Answer 5

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