javascript - Binding multiple event handler pairs on dynamically generated elements in jquery with on -

i have dynamically generated elements class my-class on want bind events. have below code works properly.

$(document).on("event1", ".my-class", function () {     alert("event 1"); });  $(document).on("event2", ".my-class", function () {     alert("event 2"); }); 

i want refactor there can single call on category. this

$(document).on(".my-class", {           "event1": function() {alert("event1")},     "event2": function() {alert("event2")} }); 

is possible in jquery?

there might better way, i've used before , worked me:

demo fiddle

i wouldn't delegate off document, instead i'd use closest parent container.

js:

$('body').on('click mouseenter', 'div', function(e) {     if (e.type === 'click') {         $('div').html('clicked');     }     else {   //you'd need else if here if had more 2 event types         $('div').html('mouse enter');     } });