'on'を複数のセレクタに同時にバインドするにはどうすればよいですか？

Question

'on' で使用したとき、私は

$('#el1').bind({ 
    click,function(e){ 
     alert('clicked on el1'); 
    }, 
}) 
$('#el2').bind({ 
    click,function(e){ 
     alert('clicked on el2'); 
    }, 
}) 

に似た何かを望んでいました。 私は次のようなものを探していました：

$(document).on({ 
    click:'el1',function(e){ 
     alert('clicked on el1'); 
    }, 
    click:'el2',function(e){ 
     alert('clicked on el2'); 
    } 
}) 

これは機能しません。

[編集]
私はもっと明確にする必要があると思います。異なる機能には共通点がありません。おそらくこのような何かをするだろう：

$(document).on({ 
    click:'el1',function(e){ 
     alert('clicked on el1'); 
    }, 
    click:'el2',function(e){ 
     $('body').css('background-color','green'); 
    } 
}) 

を私は現在、私が探していたものに近いようにswitch caseソリューションを使用して参照してください。

Answer 1

ハンドラ関数が関連していない場合は、それらを1つに分解しようとしないでください。可読性が損なわれます。

代わりに、ハンドラを個別に取り付けてください。

$('#el1').click(function() { ... }); 
$('#el2').click(function() { ... }); 

これは、2つの別々の無関係な機能として即座に認識されます。将来、このコードを維持して変更する方が簡単になります。あなたのコードを初めて知った人は、不愉快な慣習を学ぶ必要はありません。これはjQueryが動作する方法です。

$('#el1,#el2').click(function() { 
    switch (this.id) { 
     case 'el1': ... break; 
     case 'el2': ... break; 
    } 
}); 

ww。

Answer 2

セレクタは、メソッド呼び出しで設定できます。

$("body").on("click", "#el1, #el2", function(){ 
alert("clicked on " + $(this).attr("id")); 
}); 

Answer 3

あなたはセレクタを組み合わせ、または一般的なパターンで行く、そしてそれらに対して$.onを使用することができます。

$("body").on("click", "[id^='el']", function(){ 
    switch (this.id) { 
    case "el1" : 
     /* Do el1 stuff */ 
     break; 
    case "el2" : 
     /* Do el2 stuff */ 
    } 
}); 

デモ：http://jsbin.com/asoqoz/edit#javascript,html

Answer 4

すべてのDOMを検索するのではなく、要素にクラスを使用します。

<div id="el1" class="someClass"></div> 
<div id="el2" class="someClass"></div> 

$('.someClass').on('click', function(){ 
    alert("Clicked on " + this.id); 
});