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

Solution 1:

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");

Solution 2:

Also, if you had multiple event handlers attached to the same selector executing the same function, you could use

$('table.planning_grid').on('mouseenter mouseleave', function() {
    //JS Code
});

Solution 3:

If you want to use the same function on different events the following code block can be used

$('input').on('keyup blur focus', function () {
   //function block
})