jQuery 有 .delegate('hover') 的句柄吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4772287/
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
Does jQuery have a handleout for .delegate('hover')?
提问by Chris Abrams
I am trying to use:
我正在尝试使用：
$('mydiv').delegate('hover', function() {
$('seconddiv').show();
}, function() {
//For some reason jQuery won't run this line of code
$('seconddiv').hide();
});
回答by DerVO
User113716's great answer will no longer work in jQuery 1.9+, because the pseudo-eventhoveris no longer supported (upgrade guide).
User113716 的好答案将不再适用于jQuery 1.9+，因为不再支持伪事件hover（升级指南）。
Also since jQuery 3.0delegate()for binding events is officially deprecated, so please use the newon()(docs)for all event binding purposes.
此外，由于用于绑定事件的jQuery 3.0delegate()已正式弃用，因此请使用新的on()（文档）用于所有事件绑定目的。
You can easily migrate user113716's solution by replacing hoverwith mouseenter mouseleaveand switching to the on()syntax:
您可以轻松地迁移user113716的替换解决方案hover与mouseenter mouseleave和切换到on()语法：
$('mydiv').on('mouseenter mouseleave', 'seconddiv', function(event) {
$(this).toggle( event.type === 'mouseenter' );
});
If your problem is more complex than a simple toggle, I suggest binding two separate events:
如果您的问题比 simple 更复杂toggle，我建议绑定两个单独的事件：
$('mydiv').on('mouseenter', 'seconddiv', function( event ) {
// do something
}).on('mouseleave', 'seconddiv', function( event ) {
// do something different
});
NB:Since hoverwas removed in v1.9 and on()was introduced in v1.7, there is no real need for a solution using delegate()- but if you like it for some reason; it is still there (for now) and does the job:
注意：由于hover已在 v1.9 中删除并在 v1.7on()中引入，因此没有真正需要使用的解决方案delegate()- 但如果您出于某种原因喜欢它；它仍然存在（目前）并完成工作：
$('mydiv').delegate('seconddiv','mouseenter mouseleave', function(event) {
$(this).toggle( event.type === 'mouseenter' );
});
回答by user113716
With delegate()(docs), you assign it to a container, and the first argument is the element that should trigger the event.
使用delegate()(docs)，您将其分配给一个容器，第一个参数是应该触发事件的元素。
Also, .delegate()accepts only one function, so for the hoverevent you need to test the event.typeto determine show()(docs)or hide()(docs).
此外，.delegate()只接受一个函数，因此对于hover事件，您需要测试event.type以确定show()(docs)或hide()(docs)。
$('.someContainer').delegate('.someTarget','hover', function( event ) {
if( event.type === 'mouseenter' )
$('seconddiv').show();
else
$('seconddiv').hide();
});
For show/hide, a shorter way to write this is to use toggle()(docs), which can accept a switchargument where truemeans showand falsemeans hide:
对于显示/隐藏，更简短的写法是使用toggle()(docs)，它可以接受一个switch参数，其中truemeanshow和falsemean hide：
$('.someContainer').delegate('.someTarget','hover', function( event ) {
$('seconddiv').toggle( event.type === 'mouseenter' );
});
Note that the mouseenterevent is reported as of jQuery 1.4.3. If you're using 1.4.2, it will be reported as mouseover.
请注意，该mouseenter事件是从 报告的jQuery 1.4.3。如果您正在使用1.4.2，它将被报告为mouseover。
EDIT:
编辑：
If I'm understanding your comments below, you'd have something like this (using the proper selectors of course).
如果我理解你在下面的评论，你会有这样的东西（当然使用正确的选择器）。
$('mydiv').delegate('seconddiv','hover', function( event ) {
$(this).toggle( event.type === 'mouseenter' );
});
回答by Daniel
I know the OP wanted a delegatesolution (so was I when I bumped into this question...)
我知道 OP 想要一个delegate解决方案（当我遇到这个问题时我也是如此......）
But after further investigationI found out its possible to achieve the same without js/jquerycode at all
但是经过进一步调查，我发现完全没有js/jquery代码也可以实现相同的目标
All you need is a bit of CSS
你只需要一点CSS
.someContainer .seconddiv{
display : none;
}
.someContainer:hover .seconddiv{
display : block;
}
INMO it a much more efficient/ligthwheigth solution
INMO 它是一个更有效/更轻的解决方案
回答by Michael Irigoyen
.delegate()does not have a handle out. Also, you need the specify the element you are targeting with the first parameter.
.delegate()没有把手出来。此外，您需要使用第一个参数指定您要定位的元素。
You could try something like this, however:
但是，您可以尝试这样的操作：
$('table').delegate('tr', 'hover', function() {
$(this).toggle();
});
回答by mVChr
EDIT: misinformation removed.
编辑：错误信息已删除。
If you want to use the hover()method without delegation, working code would look like this:
如果您想在hover()没有委托的情况下使用该方法，则工作代码如下所示：
$('#mydiv').hover(function() {
$('#seconddiv').show();
}, function() {
$('#seconddiv').hide();
});
Second of all, delegateis to assign an event handler to a child, so you need to specify a selector first. If you need to make sure this event handler exists for dynamically added elements, I would prefer .live()in this case with mouseenterand mouseleave.
其次，delegate就是给子进程分配一个事件处理器，所以需要先指定一个选择器。如果您需要确保动态添加的元素存在此事件处理程序，.live()在这种情况下，我更喜欢使用mouseenter和mouseleave。
$('#mydiv').live('mouseenter', function() {
$('#seconddiv').show();
}).live('mouseleave', function() {
$('#seconddiv').hide();
});
