CODEWITHSUNDEEP
javascriptjqueryjquery-selectorsjquery-1.7
butangphp
butangphp

Reputation: 1613

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

Upvotes: 159

Views: 181905

Answers (7)

MagentoAaron
MagentoAaron

Reputation: 101

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

Upvotes: 0

thakurdev
thakurdev

Reputation: 430

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

Upvotes: 33

Iman
Iman

Reputation: 18906

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

Upvotes: 15

Yogesh
Yogesh

Reputation: 289

Try with the following code:

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

  }
);

Upvotes: 1

Pirijan
Pirijan

Reputation: 3579

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

Upvotes: 219

angelmedia
angelmedia

Reputation: 977

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

Upvotes: 9

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262939

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

Upvotes: 278

Related Questions