javascript - Is it possible to bind multiple functions to multiple delegation targets in one place? -

as possible define multiple event handlers in 1 single function in jquery this:

$(document).on({     'event1': function() {         //do stuff on event1     },     'event2': function() {         //do stuff on event2     },     'event3': function() {         //do stuff on event3     },     //... }); 

then again can this:

$(document).on('click', '.clickedelement', function() {     //do stuff when $('.clickedelement') clicked }); 

i wondering if possible (the following code not work, it's illustration):

$(document).on('click', {     '.clickedelement1', function() {         //do stuff when $('.clickedelement1') clicked     },     '.clickedelement2', function() {         //do stuff when $('.clickedelement2') clicked     },     //... , on }); 

this code gives me error complaining "," after '.clickedelementx'. tried this:

$(document).on('click', {     '.clickedelement1': function() {         //do stuff when $('.clickedelement1') clicked     },     //... , on }); 

then don't have error function not executed. there way collect click handlers in 1 place or have this:

$(document).on('click', '.clickedelement1', function() {     //do stuff when $('.clickedelement1') clicked }); $(document).on('click', '.clickedelement2', function() {     //do stuff when $('.clickedelement2') clicked }); //... , on 

thx help!

you can chain :

$(document).on({     click: function() {         //click on #test1     },     blur: function() {         //blur #test1     } }, '#test1').on({     click: function() {         //click #test2     } }, '#test2'); 

fiddle