Question

I’m looking to add a click handler to a div. But is there a way to use a single click handler function and share it between multiple divs? Since I may have 100 divs, I don’t want to create a click handler for each (they’ll all practically do the same thing). The jquery example shows:

$("p").click(function () { 
    $(this).foo(); 
});

can we do something like:

$("p").click(myClickHandler);

function myClickHandler(source) {
    source.foo();
}

?

Answer 1

jQuery’s .delegate() method is a great way to go if you don’t want the overhead of hundreds of click events.

It assigns one event to a container, which gets fired when the specified descendants of the container get the event.

Test the example: https://jsfiddle.net/jYKgm/210/

HTML

<div id="container">  // #container has the event handler assigned
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>​

jQuery

   // The click event handler will fire when <div> elements  
   //   that descend from #container get clicked.
$('#container').delegate('div', 'click', function() {
    alert('index ' + $(this).index() + ' was clicked');
});

This will assign one handler to the #container element, and make it so that any descendant div elements will trigger the handler.

So if there are 500 descendant div elements, they will all share the one event handler.

​ – .delegate() – http://api.jquery.com/delegate