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             Thanks in advance

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Try with the following code      textarea id   options    input id   options      on  keyup onmouseout keydown keypress blur change      function

User · Answer

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

User · Answer

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

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

Examples related to javascript

Examples related to jquery

Examples related to jquery-selectors

Examples related to jquery-1.7