javascript - 複数のクリック ハンドラーを 1 つに結合する

Question

同じ機能を実行する 2 つのクリック ハンドラーがあるとします。

$('#div1').click(function(event) {  
alert('here');                              
});

$('#div2').click(function(event) {  
alert('here');                              
});

alert の呼び出しを繰り返す代わりに、これら 2 つのハンドラーを 1 つに結合するにはどうすればよいですか?

何かのようなもの ：

$('#div1').click.('#div2').click(function(event) {  
alert('here');                              
});

Answer 1

最初の方法:

$('#div1, #div2').click(function(event) {  
     alert('here');                              
});

2 番目の方法:

function doIt(e) {
    alert('here');
}
$('#div1').click(doIt);
$('#div2').click(doIt);

この問題があるという事実は、idだけでなくクラスを使用する必要があることを意味する場合があることに注意してください。

$('.alertable').click(function(event) {  
     alert('here');                              
});

Answer 2

これを試して：

$('#div1, #div2').click(function(event) {  
   alert('here');                              
});

さらに、div共通の親に多くの要素が含まれている場合は、次のように、イベント委任を利用して親自体に単一のハンドラーをアタッチできます。

$('.common-parent').on('click', 'div', function(event) {  
   ...                          
});