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);
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.
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
});
精彩评论