Organizational Research By

Surprising Reserch Topic

jquery on method with multiple event handlers to one selector


jquery on method with multiple event handlers to one selector  using -'javascript,jquery,jquery-selectors,jquery-1.7'

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!
    

asked Sep 22, 2015 by vickeykumar66
0 votes
4 views



Related Hot Questions

4 Answers

0 votes

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");
answered Sep 22, 2015 by kinnari
0 votes

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
});
answered Sep 22, 2015 by vimaldas2005
0 votes

I learned something really useful and fundamental from http://try.jquery.com/levels/4/sections/11.

chaining which works on on function output too

function showPhotos() {
    $(this).find("span").slideToggle();
  }
  $(".photos").on("mouseenter", "li", showPhotos)
              .on("mouseleave", "li", showPhotos);
answered Sep 22, 2015 by virendra.bajaj
0 votes

And you can combine same events/functions in this way:

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    'click blur paste' : function() {
        // Handle click...
    }
}, "input");
answered Sep 22, 2015 by santosh soni

...