javascript - jquery on ('click' ) vars 引用的多个元素的处理程序

Question

注意我知道我添加了 id 并将它们组合在一个选择器中，例如"#myDiv1,#myDiv2"所以请不要提出这个建议，因为它与我的问题无关。

有没有办法在一个 on() 声明中将下面的变量“链接”在一起，可能作为数组或其他东西？

var myDiv1 = $('<div>Something here</div>');
var myDiv2 = $('<div>Something else here</div>');

myDiv1.on('click', function(){ doSomething();});
myDiv2.on('click', function(){ doSomething();});

我有一堆变量需要对鼠标事件进行一些广泛的跟踪，像上面的例子一样单独设置它们感觉很麻烦。

Answer 1

• 您可以将 DOM 元素数组传递给 jQuery 函数:

  $([
      myDiv1.get(0), 
      myDiv2.get(0)
  ]).on('click', function(){ doSomething();});
  

  jsFiddle Demo

• 另一种可能的方法是使用 .add()方法:

  myDiv1.add(myDiv2).on('click', function(){ doSomething();});
  

  jsFiddle Demo

• 将它们放在一个数组中，遍历它们并附加相同的处理程序。我用 ES5 forEach 制作了示例，但您可以随意使用简单的 for 循环或 $.each。

  [cucc, gomb].forEach(function (el) {
      el.on('click', handler);
  });
  

  jsFiddle Demo

• 如果他们有共同的祖先，给他们一个共同的类并使用事件委托(delegate)。根据您的元素数量，这可能是性能方面的最佳解决方案，因为您只需将一个处理程序附加到共同祖先。

  $('.ancestor').on('click', '.common', handler);
  

  jsFiddle Demo