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

Question

NB我知道我添加了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演示

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

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

  jsFiddle演示

• 将它们放在一个数组中,循环遍历它们并附加相同的处理程序.我用ES5做了例子forEach,但随意使用一个简单的for循环或$.each.

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

  jsFiddle演示

• 如果他们有一个共同的祖先,就在他们身上放一个共同的类并使用事件委托.根据元素的数量,这可能是性能最佳的解决方案,因为您只需要将一个处理程序附加到共同的祖先.

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

  jsFiddle演示