Combine Multiple Click Handlers Into One

Say I have two click handlers which perform the same functionality : $('#div1').click(function(event) { alert('here'); }); $('#div2').click(functio

Solution 1:

First way :

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

Second way :

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

Note that the fact you have this problem sometimes means you should use a class and not just id, so that you may do something like

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

Solution 2:

Try this:

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

Furthermore, if you have a lot of div elements, contained in a common parent, you may take benefit of event delegation and attach a single handler to the parent itself, like so:

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