One click handler for multiple elements?

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

Answer 2

For users running newer versions of jQuery (1.7 or later), you can try the .on() function.

Reusing the HTML example scenario in a different answer:

<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>​

The jQuery would simply be:

$('div#container').on('click', 'div', function() { alert('Hi Mom!'); });

The code looks very similar to that used for the .delegate() example.

I encountered a situation where we were searching for all <a> tags and applying special click events. For pages with hundreds of <a> tags, it was taking seconds to run the jQuery. Switching to the .on() function applied to the body tag shaved the time down to almost nothing.