views:

74

answers:

2

I need to attach a single event handler to multiple DOM elements using jQuery. I'm currently achieving this using jQuery's each() method. See below:

$([elm1, elm2, elm3]).each(function() {
  this.click(eventHandler);
});

I was wondering if there is a way to do this without using the each method and closure. I thought I would be able to do something like:

$(elm1, elm2, elm3).click(eventHandler);

This kind of statement works using Prototype.js but not in jQuery.The reason I ask the question is because after using both Prototype.js and jQuery I have found that jQuery requires simpler statements to achieve the same tasks in almost every area so I assume there must be a better way of doing this?


UPDATE

After some debugging it turns out that my original attempt to do this using:

$([elm1, elm2, elm3]).click(eventHandler);

Was failing becuase the variables elm1, elm2 and elm3 where created using jQuery's $ function. So the problem has changed and is why does the following not work:

var elm1 = $('#elm1');
var elm2 = $('#elm2');
var elm3 = $('#elm3');

$([elm1, elm2, elm3]).click(eventHandler);

yet using DOM the following does:

var elm1 = document.getElementById('elm1');
var elm2 = document.getElementById('elm2');
var elm3 = document.getElementById('elm3');

$([elm1, elm2, elm3]).click(eventHandler);
+1  A: 

This should do the trick:

$([elm1, elm2, elm3]).bind('click', function(){
    // your code here.....
});

JQuery offers to even make above code shorter, so you can omit the bind there:

$([elm1, elm2, elm3]).click(function(){ 
  // your code here
});
Sarfraz
That won't work. `$` takes two arguments, an element/selector and a context. The OP had the right idea with `$([...])`. And, btw, `$().click(...)` is exactly the same as `$().bind('click', ...)`.
J-P
You can't call `live` on an array of elements. It makes no difference whether they're dynamically generated.
SLaks
Also worth noting your `.live()` example won't work. He's using DOM elements, not a selector, and `.live()` operates completely off a selector, read the Caveats portion of the `.live()` documentation for details: http://api.jquery.com/live/
Nick Craver
+4  A: 

You can do this as short as possible like this:

$([elm1, elm2, elm3]).click(eventHandler);

When you leave off the brackets for the array, you're calling a different overload of jQuery(), with the brackets you're passing 1 argument as an array, so you're calling the jQuery(elementArray) constructor.

Nick Craver
Strange because this is the first thing I tried. I was aware that the second argument of the jQuery function was scope, so I already tried passing the elements in an array as the first argument but I can't get it to work. ?
Camsoft
Seems like I found out what is not working. It seems that the above works fine when I pass DOM elements that are instantiated using document.getElementById() but I'm actually passing jQuery versions using $('#elm1') etc.
Camsoft
@Camsoft - In that case, `elem1.add(elem2).add(elem3)` but I'd look at how you're getting this collection to begin with, can probably shorten it there. You can also do `$("#elem1, #elem2, #elem3")`
Nick Craver
@Nick, I would have done `$("#elem1, #elem2, #elem3")` but the DOM elements are function variables and not strings.
Camsoft
@Camsoft - You can also do this then: `$([elm1[0], elm2[0], elm3[0]])`, but it's less readable than the `.each()` I think.
Nick Craver