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-25T21:17:48.533

273

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 '13 at 21:17

answered Dec 22 '11 at 18:18

Frédéric Hamidi

258,201
41
486
479

1

Why isn't the selector `$("table.planning_grid td")` ? – Muers Dec 22 '11 at 18:20
12

@Muers, it would also work and the questioner acknowledges so, but also believes that he should bind the event on the `` instead of each individual `
` element, which is indeed the right way to go.
– Frédéric Hamidi Dec 22 '11 at 18:23

39

There is a good reason to use the .on on the and not on the

and it's if you dynamically add

s later. $('table td').on... will only effect the

that are in the table the moment you call this function. $('table').on(... ,'td',function...) will effect any

you will add to this table later.

– Raanan May 11 '12 at 10:31

8

@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 `` instead of one handler per `
` element becomes mandatory to achieve usable performance.
– Frédéric Hamidi Aug 17 '12 at 19:10
@FrédéricHamidi This was a hard problem to Google; but I finally found your answer. Not even the jQuery docs was clear on this. Thank you! – AVProgrammer Sep 27 '12 at 22:37
2

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. – nzifnab Jan 24 '13 at 18:01
Good job using the `selector` parameter. I am now using this approach for most Form event handlers and using the selector parameter to lazy attach. – GoldBishop Feb 07 '17 at 18:17

score 213 · Answer 2 · edited Sep 21 '15 at 04:34

213

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 '15 at 04:34

Turnerj

4,258
5
35
52

answered Jun 24 '14 at 15:46

Pirijan

3,430
3
19
29

9

this is what i was looking for – RozzA Mar 16 '17 at 21:37
1

...and then get the actual fired event type with e.type (after adding the event as a parameter, i.e. ...function(e)... – William T. Mallard Aug 08 '18 at 16:07

score 32 · Answer 3 · edited Jul 26 '17 at 13:54

32

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 '17 at 13:54

Nayantara Jeyaraj

2,624
7
34
63

answered Jul 26 '17 at 12:40

thakurdev

420
4
7

score 13 · Answer 4 · edited Dec 28 '16 at 14:28

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

score 9 · Answer 5 · answered Aug 29 '14 at 10:48

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

score 1 · Answer 6 · edited Oct 26 '16 at 13:33

1

Try with the following code:

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

  }
);

edited Oct 26 '16 at 13:33

Paul Roub

36,322
27
84
93

answered Oct 26 '16 at 13:24

Yogesh

289
4
13

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

6 Answers6

Linked

Related