jquery on('click') handler for multiple elements referenced by vars

Question

N.B. I\'m aware that I add ids and combine these in a selector e.g. \"#myDiv1,#myDiv2\" so please refrain from suggesting this as it does not relate to my question.

Answer 1

• You can pass an array of DOM elements to the jQuery function:

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

  jsFiddle Demo

• Another possible way is to use the .add() method:

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

  jsFiddle Demo

• Put them in an array, loop through them and attach the same handler. I made the example with ES5 forEach, but feel free to use a simple for loop or $.each.

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

  jsFiddle Demo

• If they have a common ancestor, put a common class on them and use event delegation. Depending on the number of your elements, this could be the best solution performance-wise, because you only have to attach one handler to the common ancestor.

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

  jsFiddle Demo