[解決済み] 1つのセレクタに複数のイベントハンドラを持つJQuery .on()メソッド

質問

複数のイベントが関連付けられている特定のセレクタで、Jquery .on() メソッドを使用する方法を見つけようとしています。 以前は.live()メソッドを使用していましたが、.on()で同じ偉業を達成する方法がよくわかりません。 以下の私のコードを参照してください。

$("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.
  }
});

呼び出しで複数のイベントを割り当てることができるのは知っています。

 $("table.planning_grid td").on({
    mouseenter:function(){  //see above
    },
    mouseleave:function(){ //see above
    }
    click:function(){ //etc
    }
  });

しかし、.on()の正しい使い方は、このようになるのではないでしょうか。

   $("table.planning_grid").on('mouseenter','td',function(){});

これを実現する方法はあるのでしょうか？ あるいは、ここでのベストプラクティスは何でしょうか？ 私は以下のコードを試してみましたが、ダメでした。

$("table.planning_grid").on('td',{
   mouseenter: function(){ /* event1 */ }, 
   mouseleave: function(){ /* event2 */ },
   click: function(){  /* event3 */ }
 });

ありがとうございました。

どのように解決するのですか？

それは 逆に . と書くべきでしょう。

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");