Javascript 在一个选择器中使用多个事件处理程序的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");

---

此外，如果将多个事件处理程序连接到执行相同函数的同一选择器，则可以使用

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

---

您可以通过以下方式组合相同的事件/功能：

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

---

我从中学到了一些非常有用和基本的东西

链接函数在这种情况下非常有用，它适用于大多数jQuery函数，包括函数输出

它之所以有效，是因为大多数jQuery函数的输出都是输入对象集，所以您可以立即使用它们，并使其变得更短、更智能

function showPhotos() {
    $(this).find("span").slideToggle();
}

$(".photos")
    .on("mouseenter", "li", showPhotos)
    .on("mouseleave", "li", showPhotos);

---

请尝试使用以下代码：

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

  }
);

---

如果要在不同事件上使用相同的函数，可以使用以下代码块

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

---

为什么选择器

$（“table.planning_grid td”）

？@Muers，它也会起作用，提问者承认这一点，但也认为他应该将事件绑定到

上，而不是每个

元素上，这确实是正确的方法。有一个很好的理由在上使用而不是在上使用。如果您稍后动态添加$（'table td'）。在。。。只会在调用此函数时影响表中的$（'table'）。on（…，'td'，function…）将影响您以后添加到此表中的任何内容。@Raanan，的确如此，此外，每个注册的事件处理程序都有成本，尽管成本很小。处理数千个单元格时，必须在

元素上注册一个处理程序，而不是每个

元素注册一个处理程序，才能实现可用性能。同意。很难用谷歌搜索这个问题，因为“on”是一个非常常见的词，大多数结果都与

.bind

和

.live

有关。回答得好，正是我想要的：D@FréDéric-你的链接不再链接到jquery文档页面上的标题

id

。可能是更新文档的结果。但我在那页上找不到这个答案。这就是我要找的…然后用e.type获得实际触发的事件类型（在将事件添加为参数后，即…函数（e）…）。。。