Question

我有一个示例html菜单：

<div class="mmenu">
    <ul>
        <li>
            <div  class="menu_button" id="m1" >A</div>
        </li>
        <li>
            <div  class="menu_button" id="m2" >B</div>
        </li>
        <li>
            <div  class="menu_button" id="m3" >C</div>
    </ul>
</div>

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

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

Answer 1

通过不使用 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），这也将有效

Answer 2

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

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

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会更合适！

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

5 个答案: