如何通過類名添加點擊事件？

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函數，而不是.click，因爲在運行時添加的元素也是可點擊的。

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

Answer 2

您可以找到this.id

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

的ID，但如果代碼是爲每個按鈕完全不同的，那麼它可能不會是這樣使用它有用，而是結合每一個不同的處理程序ID。

Answer 3

是的。您可以將一個事件處理函數綁定到任何一組DOM元素，無論它們是由類還是其他類來選擇。你的例子中的語法是正確的，並且事件處理程序將被綁定到由選擇器匹配的每個元素。

但是，請記住，在您的示例id將是未定義的。您將不得不使用this.id，因爲this將引用已被單擊的元素。

Answer 4

如果我正確理解你的問題，請嘗試使用此：

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

順便說一句：在這種情況下，switch .. case將更爲合適！

Answer 5

優化你的代碼不使用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 
     } 
    }); 

通過這種方式，你有只有點擊事件結合到主分區$('.mmenu')，如果你在未來