具有一个选择器的多个事件处理程序的JQuery .on（）方法

Question

试图弄清楚如何将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 */ }

 });

提前致谢！

Answer 1

那是另一回事。您应该写：$("table.planning_grid").on({    mouseenter: function() {        // Handle mouseenter...    },    mouseleave: function() {        // Handle mouseleave...    },    click: function() {        // Handle click...    }}, "td");

Answer 2

另外，如果将多个事件处理程序附加到执行相同功能的同一个选择器，则可以使用$('table.planning_grid').on('mouseenter mouseleave', function() {    //JS Code});

Answer 3

从这里我学到了一些真正有用和基本的东西。链接功能，在这种情况下，其中大多数jQuery的功能，包括工作原理是非常有用的功能输出过。之所以可以使用它，是因为大多数jQuery函数的输出都是输入对象集，因此您可以立即使用它们，使其更短，更智能function showPhotos() {    $(this).find("span").slideToggle();}$(".photos")    .on("mouseenter", "li", showPhotos)    .on("mouseleave", "li", showPhotos);