jQuery .on() method with multiple event handlers & multiple selectors

Question

So I know that we can have multiple event handlers on the .on() method

$(document).on({
    'click': function (e) {
       // function
    },
    'hover': function (e) {
       // function    
    }
});

but is there anyway we can add multiple selectors to each event handler?

like this:

$(document).on('click', '#foo, .foo', function () { 
     // function
});

but with multiple .on() methods:

$(document).on({
    'click', '#foo': function (e) {
       // doesn't work :(
    },
    'hover', '.foo': function (e) {
       // doesn't work :(    
    }
});

Thanks in advance

If you are having different selecters for each event, why not just split them out into their own on - it will be far more maintainable — Pete
– Pete, Commented Jan 17, 2017 at 10:24
use multiple on() methods or in case you need common selector then use selector as second argument — Pranav C Balan
– Pranav C Balan, Commented Jan 17, 2017 at 10:25

T.J. Crowder · Accepted Answer · 2017-01-17 10:32:01Z

7

If you want different matching elements on different events, you need to use different on calls. You can use a single on call to hook multiple events for the same elements, but you can't use a single on for a mix and match of events and selectors (nor is there any need to).

You could, of course, create your own function that does that. For instance, something vaguely like:

$.fn.mixon = function(events) {
    Object.keys(events).forEach(function(selector) {
        var entry = events[selector];
        Object.keys(entry).forEach(function(event) {
            this.on(event, selector, entry[event]);
        }, this);
    }, this);
    return this;
};

...which you could use like this:

$(document).mixon({
    "#foo": {
        "click focus": function() {
           // ...
        }
    },
    ".foo": {
        click: function() {
           // ...
        }
    }
});

edited Jan 17, 2017 at 10:32

answered Jan 17, 2017 at 10:26

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery .on() method with multiple event handlers & multiple selectors

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related