2011-06-15 63 views
0

我有這樣的HTML:如何選擇多個元素來捕捉JavaScript單擊事件?

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

使用jQuery我怎麼會說,當任何這些元素被點擊執行一定的功能?

我有這個,但沒有奏效:

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

任何想法?

+1

這應該很好地工作......看到這個小提琴:http://jsfiddle.net/interdream/jUysR/ – 2011-06-15 19:02:33

+0

沒什麼錯在這裏,你是什麼意思你的問題的標題是複雜的: ? – Synxmax 2011-06-15 19:07:24

+0

只是想出了什麼是錯的...我正在尋找event.target只是'outsideContainer'而不是'ul'和'li's – chromedude 2011-06-15 19:08:58

回答

0

我不包括實際上導致的問題(這是在//do stuff的JavaScript,但我是有我一直在尋找的event.target是問題只是outsideContainer代替ulli小號

4

大多數情況下沒問題。可能的原因是行不通:

  1. 你執行你的JavaScript中的「outsideContainer」元素存在之前,例如:

    的元素必須存在的,當腳本調用的。您可以將script區塊放在頁面的最後,就在關閉body標籤之前,或者將代碼包裝到您傳遞給jQuery的ready函數的函數中。

  2. 您期待着您的回調中的this指向li元素;實際上,它會引用「outsideContainer」div,因爲這就是事件處理程序所關注的內容。您可以通過event.targetli元素得到:

    $('#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
+0

感謝,間接幫助我,因爲我正在尋找的event.target只是'outsideContainer'而不是'ul'和''的 – chromedude 2011-06-15 19:08:02

+0

@chromedude:LOL!我沒有考慮過這種情況。你可能想看看我添加的鏈接,儘管聽起來像你現在在那裏。 – 2011-06-15 19:11:04

1

這隻會在點擊整個div時觸發。

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

要捕捉點擊每一個人li做:

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

正如T.J.注意克勞德,你有什麼作品,但你會想知道this的背景。用event.target代替this會給你點擊的實際元素。

作爲演示,我在下面提供了一個小提示,它將提醒點擊元素的節點(標籤)類型和文本內容。 <div>,<ul><li>都具有不同的彩色邊框,以幫助您直觀地確定您實際點擊的內容。

Live demo ->

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