var $obj1 = $('a#one');
var $obj2 = $('a#two');
var $obj3 = $('a#three');
// Assume $('a#one, a#two, a#three') wasn't an option.
How do I assign one (same) event handler e.g. click() to those three jQuery objects? Essentially, I am looking for a more efficient way of doing:
$obj1.click(function() { /* Code A */ });
$obj2.click(function() { /* Code A */ });
$obj3.click(function() { /* Code A */ });
Only (very) marginally shorter, but:
$([$obj1, $obj2, $obj3]).click(function() { });
You would want to define your handler outside of the first anonymous function though, so you'd really probably be better off with Jonas H's method. Just throwing another suggestion out there.
Note: you could technically do a hybrid, but it's quite lengthy:
var f = function() { };
$([$obj1, $obj2, $obj3]).click(f);
Really this question is only useful if you want to avoid the $a.click(f) over and over again, which is truly a better option than this jQuery abuse. :)
.each loop, because the click handler is attached to all the elements in the current collection. See the first example here api.jquery.com/click
data function. So this won't work: $([$obj1, $obj2]).data("property",true); but this will: $($obj1, $obj2).data("property",true);. Hope that helps someone.Hmm, there's always .add(), but personally I prefer writing out the .click() functions one by one, if I started out with seperate variables anyway. No need to acquire additional overhead creating new jQuery objects for such trivial functionality.
$obj1.add($obj2).add($obj3).on('click' , function () { } );
// not sure if $obj1.add($obj2, $obj3) will work as well
$obj1.add($obj2, $obj3) doesn't work i.e. the handler won't be attached to $obj3. Sample: jsfiddle.net/sikusikucom/VsVcyvar myFunction = function() { /* Code A */ };
$obj1.click(myFunction);
$obj2.click(myFunction);
$obj3.click(myFunction);
get a common parent container and use jQuery .on() on it.
<div id="parent">
<a href="#" id="one">1</a>
<a href="#" id="two">2</a>
<a href="#" id="three">3</a>
</div>
//any <a> clicked under parent executes this function
$('#parent').on('click','a#one, a#two, a#three',function(){
//do stuff
});
the best part of it is: it's just one handler and it's in the parent. you aren't putting multiple handlers on multiple elements. plus, when you modify the handler, it takes effect for all. no need to individually change handlers for each element who has it. demo here
In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored. On a data table with 1,000 rows in its tbody, this example attaches a handler to 1,000 elements:
A delegated-events approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody)
$('a.codeA').click(function() { /* Code A */ });