Search code examples
jqueryeventsevent-handlingprototypejs

Shortest way of attaching multiple DOM elements to one event handler using Jquery?

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);
Solution

  • 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.