One click handler for multiple elements?

Question

Hi,

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();
}

?

Thanks

Answer 1

Yes.

There's no need (or ability) to pass a separate source parameter, though. The this object was available in your anonymous function, and so too will it be available in your named function. It will, as always, be the object that was clicked.

function myClickHandler() {
    $(this).foo();
}

Answer 2

If they are all owned by the same element:

<div id="lol">
<p>blah</p>
<p>slfk</p>
</div>

You can do

$('#lol').click(function(e){

alert( $(e.target).text() );

});

You can apply it to the document too. This way you set the click on 1 element and grab the target. You can add logic to make sure its a paragraph and whatnot too.

This will only use the one function literal and no other functions. Less overhead than .delegate because it does it on the spot instead of internally.

Answer 3

Yes, you can use the same handler for multiple divs. As shown, this will be set to the element that was clicked, and you can use it however you wish. It will not be passed as an argument, so your second example doesn't work.

$("div.someclass").click(myClickHandler);

function myClickHandler() {
    $(this).foo();
}

Answer 4

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: http://jsfiddle.net/jYKgm/

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 5

Consider this code:

$('div').bind('click', eventHandler);

eventHandler = function () { ... }