使用on将jquery中动态生成的元素上的多个事件处理程序对绑定

Question

I have some dynamically generated elements with the class my-class on which I want to bind some events. I have the below code which works properly.

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

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

I want to refactor it so that there can be a single call to on for the category. Something like this

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

Is this possible in jquery?

Answer 1

There might be a better way, but I've used this before and it worked for me:

Demo Fiddle

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

JS:

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