如何將點擊處理程序分配給jQuery的每個孩子？

<div id="menu"> 
    <div class="menuitem-on" id="home">Home</div> 
    <div class="menuitem-off" id="mycart">My Cart</div> 
    <div class="menuitem-off" id="shop">Shop</div> 
</div>

如何分配點擊處理程序給jQuery的菜單的每個孩子？如何將點擊處理程序分配給jQuery的每個孩子？

來源

2011-02-07 Watch November

$("#menu div").click(function(){ 
    // your code goes here 
    // $(this) give you the element that was clicked 
});

來源

2011-02-07 21:42:14 rcravens

這是正確的，但爲每個元素創建一個事件處理程序，你應該總是嘗試追加處理程序到父元素，並通過`event.target`進行區分 – 2011-02-07 21:49:38

我同意@Pablo（我贊成他的回答）。這是做到這一點的最佳方式。上面的代碼可以工作。 – rcravens 2011-02-07 22:08:52

你不想這樣做，因爲：

您爲每個孩子
一個事件處理程序，如果動態地加入更多的元素，該處理程序將不爲他們工作。

更好的解決方案是向父元素添加單個事件處理程序，然後根據包含被單擊元素的event.target屬性執行不同的操作。

這是因爲event bubbling，這是一個很酷的功能，你應該利用。

特別是jQuery在他們稱之爲live events的摘要下，所以你應該去看看這些。

來源

2011-02-07 21:42:20

使用click()或bind('click', ...)綁定事件到每個元素都不是一個好的解決方案，因爲如果您有，可以說50個項目，您將必須綁定50個相同的處理程序 - 瀏覽器必須全部註冊它們。

更好的解決方案是使用稱爲事件委託的功能 - 而jQuery對此具有特殊的方法 - delegate()。所以，你的代碼看起來就像這樣：

$('#menu').delegate('div', 'click', function() { 
    //code of your handler - 'this' refers to clicked element 
});

有視頻顯示click，jQuery的live和delegate之間差異的文章：NetTuts+。

來源

2011-02-07 21:52:42 singles

你輸入比我更快:) – 2011-02-07 21:54:02

$("#menu").delegate('div','click', function(){ 
//do your thing here 
});

處理程序是父母，所以只有一個。您可以添加更多div而不更改代碼。

這是一個小提琴頁面，顯示幾個不同的選擇器選項來獲得點擊任何地方，或只是第一級。示出了使用時的目標，currentTarget當前還有：http://jsfiddle.net/8GLZJ/

更新2013年3月18日爲1.9.1+ jQuery的使用：

$("#menu").on('click','div', function(){ 
//do your thing here 
});

來源

2011-02-07 21:53:28

喜歡的東西

$("#menu div").on('click', function(){ 
    //alert('clicked'); 
});

來源

2013-03-31 17:40:47 KhanSharp

如何將點擊處理程序分配給jQuery的每個孩子？

回答

相關問題