butangphp butangphp - 1 month ago 11
Javascript Question

JQuery .on() method with multiple event handlers to one selector

Trying to figure out how to use the Jquery .on() method with a specific selector that has multiple events associated with it. I was previously using the .live() method, but not quite sure how to accomplish the same feat with .on(). Please see my code below:

$("table.planning_grid td").live({
mouseenter:function(){
$(this).parent("tr").find("a.delete").show();
},
mouseleave:function(){
$(this).parent("tr").find("a.delete").hide();
},
click:function(){
//do something else.
}
});


I know I can assign the multiple events by calling:

$("table.planning_grid td").on({
mouseenter:function(){ //see above
},
mouseleave:function(){ //see above
}
click:function(){ //etc
}
});


But I believe the proper use of .on() would be like so:

$("table.planning_grid").on('mouseenter','td',function(){});


Is there a way to accomplish this? Or what is the best practice here? I tried the code below, but no dice.

$("table.planning_grid").on('td',{
mouseenter: function(){ //event1 },
mouseleave: function(){ //event2 },
click: function(){ //event3 }
});


Thanks in advance!

Answer

That's the other way around. You should write:

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");