title: JQuery .on() method with multiple event handlers to one selector
body: <p>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:</p>
  
  <pre><code>$("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.
    }
  });
  </code></pre>
  
  <p>I know I can assign the multiple events by calling:</p>
  
  <pre><code> $("table.planning_grid td").on({
      mouseenter:function(){  //see above
      },
      mouseleave:function(){ //see above
      }
      click:function(){ //etc
      }
    });
  </code></pre>
  
  <p>But I believe the proper use of .on() would be like so:</p>
  
  <pre><code>   $("table.planning_grid").on('mouseenter','td',function(){});
  </code></pre>
  
  <p>Is there a way to accomplish this?  Or what is the best practice here?   I tried the code below, but no dice.  </p>
  
  <pre><code>$("table.planning_grid").on('td',{
     mouseenter: function(){ /* event1 */ }, 
     mouseleave: function(){ /* event2 */ },
     click: function(){  /* event3 */ }
   });
  </code></pre>
  
  <p>Thanks in advance!</p>