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

Question

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 */ }
 });

Frédéric Hamidi · Accepted Answer · 2013-01-25 21:17:48Z

277

+50

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

edited Jan 25, 2013 at 21:17

answered Dec 22, 2011 at 18:18

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Muers Over a year ago

Why isn't the selector $("table.planning_grid td") ?

Frédéric Hamidi Over a year ago

@Muers, it would also work and the questioner acknowledges so, but also believes that he should bind the event on the <table> instead of each individual <td> element, which is indeed the right way to go.

Raanan Over a year ago

There is a good reason to use the .on on the <table> and not on the <td> and it's if you dynamically add <td>s later. $('table td').on... will only effect the <td> that are in the table the moment you call this function. $('table').on(... ,'td',function...) will effect any <td> you will add to this table later.

Frédéric Hamidi Over a year ago

@Raanan, indeed, and in addition every event handler one registers has a cost, albeit tiny. When you're dealing with thousands of cells, registering a single handler on the <table> instead of one handler per <td> element becomes mandatory to achieve usable performance.

nzifnab Over a year ago

Agreed. Very difficult to google this question as 'on' is such a common word and most results were related to .bind and .live. Good answer, just what I was looking for :D @Frédéric - Your link doesn't link to a header id on the jquery docs page anymore. Probably a result of updated documentation. But I could not find this answer on that page.

|

Turnerj · Accepted Answer · 2015-09-21 04:34:25Z

221

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

edited Sep 21, 2015 at 4:34

Turnerj

4,3085 gold badges39 silver badges54 bronze badges

answered Jun 24, 2014 at 15:46

Pirijan

3,5993 gold badges21 silver badges29 bronze badges

2 Comments

RozzA Over a year ago

this is what i was looking for

William T. Mallard Over a year ago

...and then get the actual fired event type with e.type (after adding the event as a parameter, i.e. ...function(e)...

Nayantara Jeyaraj · Accepted Answer · 2017-07-26 13:54:52Z

34

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
})

edited Jul 26, 2017 at 13:54

Nayantara Jeyaraj

2,7167 gold badges37 silver badges67 bronze badges

answered Jul 26, 2017 at 12:40

thakurdev

4404 silver badges7 bronze badges

Comments

matiaslauriti · Accepted Answer · 2016-12-28 14:28:49Z

15

I learned something really useful and fundamental from here.

chaining functions is very usefull in this case which works on most jQuery Functions including on function output too.

It works because output of most jQuery functions are the input objects sets so you can use them right away and make it shorter and smarter

function showPhotos() {
    $(this).find("span").slideToggle();
}

$(".photos")
    .on("mouseenter", "li", showPhotos)
    .on("mouseleave", "li", showPhotos);

edited Dec 28, 2016 at 14:28

matiaslauriti

8,2004 gold badges37 silver badges48 bronze badges

answered Sep 5, 2014 at 14:34

Iman

19.2k7 gold badges89 silver badges94 bronze badges

Comments

angelmedia · Accepted Answer · 2014-08-29 10:48:40Z

8

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 Aug 29, 2014 at 10:48

angelmedia

9778 silver badges10 bronze badges

Comments

Paul Roub · Accepted Answer · 2016-10-26 13:33:53Z

1

Try with the following code:

$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change', 
  function() {

  }
);

edited Oct 26, 2016 at 13:33

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

answered Oct 26, 2016 at 13:24

Yogesh

2896 silver badges13 bronze badges

Comments

MagentoAaron · Accepted Answer · 2023-10-06 12:38:44Z

0

These days this should be:

$(document).on({
   mouseenter: function(e) {
     // Handle mouseenter...
   },
   mouseleave: function(e) {
     // Handle mouseleave...
   },
   'click blur paste' : function(e) {
     // Handle click...
   }
}, "<selector>");

answered Oct 6, 2023 at 12:38

MagentoAaron

1015 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

7 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related