开发者

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜