如何按类名添加点击事件？

我有一个示例html菜单：

 
 
 
A
 
 
 
B
 
 
 
C
 
  

我可以按类名为菜单的每个元素添加click事件吗？

  $('.menu_button').click(function() { if ( id == "m1" ) .... }) 

Answer 1

我建议使用live函数而不是.click，因为在运行时添加的元素也是可点击的。

 $('.menu_button').live('click', function() { var id = $(this).attr('id'); if (id == "m1") { //do your stuff here } }); 

Answer 2

不使用 live() 来优化代码，因为我们无法阻止live()事件的传播

使用on() （jQuery 1.7+）或delegate() （1.7以下）

在这种情况下，针对您的方案的最有效解决方案是：

 // $('.mmenu').on("click", ".menu_button", function() { // jQuery 1.7 & up $('.mmenu').delegate(".menu_button", "click", function() { var id = $(this).attr('id') // or this.id if ( id == "m1" ) { // ..code } }); 

这样，你只有一个点击事件绑定到主div $('.mmenu') ，如果你将来添加元素（带有div的新li $('.mmenu') ，它也会起作用

Answer 3

你可以使用this.id找到id

 $('.menu_button').click(function() { if ( this.id == "m1" ) .... }) 

但是如果每个按钮的代码完全不同，那么像这样使用它可能没有用，而是为每个id绑定一个不同的处理程序。

Answer 4

是。 您可以将click事件处理程序绑定到任何DOM元素集，无论它们是由类还是其他任何元素选择的。 示例中的语法是正确的，事件处理程序将绑定到选择器匹配的每个元素。

但是，请记住，在您的示例中， id将是未定义的。 您必须使用this.id ，因为this将引用已单击的元素。

Answer 5

如果我理解你的问题，请尝试使用：

 $('.menu_button').click(function() { if ( $(this).attr('id') == "m1" ) .... }) 

顺便说一句：在这种情况下， switch .. case会更合适！