使用Jquery将多个DOM元素附加到一个事件处理程序的最短方法?

时间:2010-04-20 12:37:15

标签: jquery events event-handling prototypejs

我需要使用jQuery将单个事件处理程序附加到多个DOM元素。我目前正在使用jQuery的each()方法实现这一目标。见下文:

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

我想知道是否有办法在不使用每个方法和闭包的情况下执行此操作。我以为我可以做类似的事情:

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

这种语句使用Prototype.js而不是jQuery。我问这个问题的原因是因为在使用Prototype.js和jQuery之后我发现jQuery需要更简单的语句才能在几乎每个区域实现相同的任务所以我认为必须有更好的方法来做到这一点?


更新

经过一些调试后发现我原来尝试使用以下方法执行此操作:

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

失败是因为使用jQuery的$函数创建的变量elm1,elm2和elm3。所以问题已经改变,为什么以下不起作用:

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

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

还使用DOM以下内容:

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

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

2 个答案:

答案 0 :(得分:6)

你可以这样做尽可能短:

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

当您从数组的括号中取消时,您正在调用different overload of jQuery(),并使用括号将1个参数作为数组传递,因此您将调用jQuery(elementArray)构造函数。

答案 1 :(得分:1)

这应该可以解决问题:

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

JQuery提供甚至使上面的代码更短,所以你可以省略bind那里:

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