我有這樣的HTML:如何選擇多個元素來捕捉JavaScript單擊事件?
<div id="outsideContainer">
<ul>
<li>Hello</li>
<li>Goodbye</li>
</ul>
</div>
使用jQuery我怎麼會說,當任何這些元素被點擊執行一定的功能?
我有這個,但沒有奏效:
$('#outsideContainer').click(function() {
//do stuff
});
任何想法?
我有這樣的HTML:如何選擇多個元素來捕捉JavaScript單擊事件?
<div id="outsideContainer">
<ul>
<li>Hello</li>
<li>Goodbye</li>
</ul>
</div>
使用jQuery我怎麼會說,當任何這些元素被點擊執行一定的功能?
我有這個,但沒有奏效:
$('#outsideContainer').click(function() {
//do stuff
});
任何想法?
我不包括實際上導致的問題(這是在//do stuff
的JavaScript,但我是有我一直在尋找的event.target是問題只是outsideContainer代替ul
和li
小號
大多數情況下沒問題。可能的原因是行不通:
你執行你的JavaScript中的「outsideContainer」元素存在之前,例如:
的元素必須存在的,當腳本調用的。您可以將script
區塊放在頁面的最後,就在關閉body
標籤之前,或者將代碼包裝到您傳遞給jQuery的ready
函數的函數中。
您期待着您的回調中的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
});
請注意,根據您的邊距和填充,event.target
可能是ul
元素,如果你的ul
內,但不是在li
點擊。
其他的東西,可能是值得考慮的:
感謝,間接幫助我,因爲我正在尋找的event.target只是'outsideContainer'而不是'ul'和''的 – chromedude 2011-06-15 19:08:02
@chromedude:LOL!我沒有考慮過這種情況。你可能想看看我添加的鏈接,儘管聽起來像你現在在那裏。 – 2011-06-15 19:11:04
這隻會在點擊整個div時觸發。
$('#outsideContainer').click(function() {
//do stuff
});
要捕捉點擊每一個人li
做:
$('#outsideContainer ul li').click(function() {
//do stuff
});
正如T.J.注意克勞德,你有什麼作品,但你會想知道this
的背景。用event.target
代替this
會給你點擊的實際元素。
作爲演示,我在下面提供了一個小提示,它將提醒點擊元素的節點(標籤)類型和文本內容。 <div>
,<ul>
和<li>
都具有不同的彩色邊框,以幫助您直觀地確定您實際點擊的內容。
$('outsideContainer ul li').click(function() {
//stuff
});
這應該很好地工作......看到這個小提琴:http://jsfiddle.net/interdream/jUysR/ – 2011-06-15 19:02:33
沒什麼錯在這裏,你是什麼意思你的問題的標題是複雜的: ? – Synxmax 2011-06-15 19:07:24
只是想出了什麼是錯的...我正在尋找event.target只是'outsideContainer'而不是'ul'和'li's – chromedude 2011-06-15 19:08:58