变量引用的多个元素的 jQuery on('click') 处理程序

Question

N.B.我知道我添加了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();});

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

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演示

Answer 2

添加到Kapa的答案中。如果您需要绑定多个已添加、预处理、附加、使用ajax或javascript加载的元素。

循环多个类并创建绑定"对于每个"；元素

var thisButton = '.this-button', //This element was added by js
    thatButton = '.that-button', //That element was added by ajax
    thesebuttons = [thisButton, thatButton];
    thesebuttons.forEach(function (button) {
        $(document).on('click touchend', button, function (e) {
        // 'e' or event, uncomment to prevent button's default event
        // e.preventDefault(); 
        // Now do your function stuff
        });
    });