Javascript 具有多个事件处理程序到一个选择器的 JQuery .on() 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8608145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery .on() method with multiple event handlers to one selector
提问by butangphp
Trying to figure out how to use the Jquery .on() method with a specific selector that has multiple events associated with it. I was previously using the .live() method, but not quite sure how to accomplish the same feat with .on(). Please see my code below:
试图弄清楚如何将 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.
}
});
I know I can assign the multiple events by calling:
我知道我可以通过调用分配多个事件：
$("table.planning_grid td").on({
mouseenter:function(){ //see above
},
mouseleave:function(){ //see above
}
click:function(){ //etc
}
});
But I believe the proper use of .on() would be like so:
但我相信 .on() 的正确使用应该是这样的：
$("table.planning_grid").on('mouseenter','td',function(){});
Is there a way to accomplish this? Or what is the best practice here? I tried the code below, but no dice.
有没有办法做到这一点？或者这里的最佳实践是什么？我尝试了下面的代码，但没有骰子。
$("table.planning_grid").on('td',{
mouseenter: function(){ /* event1 */ },
mouseleave: function(){ /* event2 */ },
click: function(){ /* event3 */ }
});
Thanks in advance!
提前致谢！
回答by Frédéric Hamidi
That's the other way around. You should write:
这是周围的其他方法。你应该写：
$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
}
}, "td");
回答by Pirijan
Also, if you had multiple event handlers attached to the same selector executing the same function, you could use
此外，如果您将多个事件处理程序附加到执行相同功能的同一个选择器，您可以使用
$('table.planning_grid').on('mouseenter mouseleave', function() {
//JS Code
});
回答by thakurdev
If you want to use the same function on different events the following code block can be used
如果您想在不同的事件上使用相同的功能，可以使用以下代码块
$('input').on('keyup blur focus', function () {
//function block
})
回答by Iman
I learned something really useful and fundamental from here.
chainingfunctions is very usefull in this case which works on most jQuery Functions including onfunction output too.
链接功能是非常有用的在这种情况下，其中大多数jQuery的功能，包括适用于功能输出过。
It works because output of most jQuery functions are the input objects sets so you can use them right away and make it shorter and smarter
它有效是因为大多数 jQuery 函数的输出是输入对象集，因此您可以立即使用它们并使其更短更智能
function showPhotos() {
$(this).find("span").slideToggle();
}
$(".photos")
.on("mouseenter", "li", showPhotos)
.on("mouseleave", "li", showPhotos);
回答by angelmedia
And you can combine same events/functions in this way:
您可以通过这种方式组合相同的事件/功能：
$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
'click blur paste' : function() {
// Handle click...
}
}, "input");
回答by Yogesh
Try with the following code:
尝试使用以下代码：
$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change',
function() {
}
);
