クリックイベントをクラス名で追加するにはどうすればよいですか？

Question

Iは、例えば、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

実行時に追加された要素もクリック可能であるため、.clickではなくlive関数を使用することをお勧めします。

$('.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

はい。 clickイベントハンドラを、クラスなどで選択されているかどうかに関係なく、DOM要素のセットにバインドできます。あなたの例の構文は正しいですし、イベントハンドラはセレクタにマッチした各要素にバインドされます。

ただし、あなたの例ではidは未定義です。 this.idを使用する必要があります。thisは、クリックされた要素を参照するためです。

Answer 4

私が正しくあなたの質問を理解していれば、これを使用してみてください：

ところで

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

：この場合、switch .. caseは、はるかに適切であろう！

Answer 5

我々はlive()イベント

使用on()（jQueryの1.7以降）または（1.7以下）delegate()の伝播を止めることはできないとしてlive()を使用していないで、あなたのコードを最適化

ほとんどこの場合のシナリオの効率的なソリューションは、次のようになります。

このようにして

// $('.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 
     } 
    }); 

、あなたは見た目より良い方法は$で将来