对一个选择器使用多个事件处理程序的 JQuery.on()方法

试图弄清楚如何使用 Jquery。方法，该方法具有与之关联的多个事件的特定选择器。我之前使用的是。Live ()方法，但不确定如何用。().请参阅我的代码如下:

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

先谢谢你！

170747 次浏览
小开
最佳答案

那是 正好相反你应该写:

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

提交答案