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

Question

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

Is there a way to 'chain' the vars below together in one on() declaration maybe as an array or something?

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

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

I have a bunch of vars that I need to do some broad tracking of mouse events and it feels messy setting them up individually like the above example.

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

Answer 2

Adding to Kapa's answer. If you need to bind multiple elements to which have been added, prepended, appended, loaded with ajax or javascript.

Loop through multiple classes and create bindings "for each" element

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

        });
    });