Question

<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为菜单的每个子项分配点击处理程序？

Answer 1

你不想那样做，因为：

您为每个孩子创建一个事件处理程序
如果动态添加更多元素，则处理程序将不适用于它们。

更好的解决方案是向父元素添加单个事件处理程序，然后根据包含所单击元素的event.target属性执行不同的操作。

这是因为event bubbling而发生的，这是你应该利用的一个很酷的功能。

jQuery特别在他们称之为live events的内容中抽象出来，所以你应该选择那些。

Answer 2

$("#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
});

Answer 3

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

Answer 4

使用click()或bind('click', ...)将事件绑定到每个元素不是一个好的解决方案，因为如果你有，可以说50个项目，你必须绑定50个相同的处理程序 - 浏览器必须全部注册。

更好的解决方案是使用称为事件委托的功能 - 而jQuery有特殊的方法 - delegate()。所以你的代码看起来像这样：

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

有一篇视频文章显示了jQuery中click，live和delegate之间的区别：NetTuts+。

Answer 5

像

这样的东西

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

如何使用jquery为每个孩子分配点击处理程序？

5 个答案: