带多个事件处理程序的JQuery .on（）方法到一个select器

试图找出如何使用具有与之关联的多个事件的特定select器的Jquery .on（）方法。 我以前使用.live（）方法，但不太清楚如何用.on（）完​​成同样的function。 请参阅下面的代码：

$("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

此外，如果你有多个事件处理程序附加到相同的select器执行相同的function，你可以使用

 $('table.planning_grid').on('mouseenter mouseleave', function() { //JS Code }); 

Answer 3

你可以用这种方式组合相同的事件/函数：

 $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, 'click blur paste' : function() { // Handle click... } }, "input"); 

Answer 4

我从这里学到了一些非常有用和重要的东西 。

链接函数在这种情况下非常有用，它对大多数的jQuery函数都有效，包括函数输出。

它的工作原理是，大多数jQuery函数的输出是input对象集，所以你可以立即使用它，使它更短，更聪明

 function showPhotos() { $(this).find("span").slideToggle(); } $(".photos") .on("mouseenter", "li", showPhotos) .on("mouseleave", "li", showPhotos); 

Answer 5

尝试使用以下代码：

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

Answer 6

如果你想在不同的事件上使用相同的function，可以使用下面的代码块

 $('input').on('keyup blur focus', function () { //function block })