如何為要捕獲的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。