jQuery是否有.delegate的handleout ('hover')功能?

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();  
});

5 个解决方案

#1

User113716's great answer will no longer work in jQuery 1.9+, because the pseudo-event hover is no longer supported (upgrade guide).

User113716的伟大答案将不再适用于jQuery 1.9+，因为伪事件悬停不再被支持(升级指南)。

Also since jQuery 3.0 delegate() for binding events is officially deprecated, so please use the new on()^(docs) for all event binding purposes.

另外，由于jQuery 3.0委托()在绑定事件时被正式弃用，所以请将新的on()(文档)用于所有事件绑定目的。

You can easily migrate user113716's solution by replacing hover with mouseenter mouseleave and switching to the on() syntax:

通过使用mouseenter mouseleave替换鼠标悬停和切换到on()语法，您可以轻松地迁移user113716的解决方案:

$('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:

如果您的问题比简单的切换更复杂，我建议绑定两个独立的事件:

$('mydiv').on('mouseenter', 'seconddiv', function( event ) {
    // do something
}).on('mouseleave', 'seconddiv', function( event ) {
    // do something different
});

NB: Since hover was 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:

NB:由于在v1.9中删除了hover，并且在v1.7中引入了on()，因此不需要使用delegate()来实现解决方案——但是如果您出于某种原因喜欢它的话;它(目前)仍在那里，并发挥着作用:

$('mydiv').delegate('seconddiv','mouseenter mouseleave', function(event) {
    $(this).toggle( event.type === 'mouseenter' );  
});

#2

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 hover event you need to test the event.type to determine show()^(docs) or hide()^(docs) .

另外，.delegate()只接受一个函数，所以对于鼠标事件，您需要测试这个事件。类型以确定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 switch argument where true means show and false means hide:

对于show/hide，更简单的写法是使用toggle()(docs)，它可以接受一个switch参数，true表示show, false表示hide:

$('.someContainer').delegate('.someTarget','hover', function( event ) {
    $('seconddiv').toggle( event.type === 'mouseenter' );  
});

Note that the mouseenter event 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' );  
});

#3

I know the OP wanted a delegate solution (so was I when I bumped into this question...)

我知道OP想要一个委托解决方案(当我遇到这个问题时我也是)

But after further investigation I found out its possible to achieve the same without js/jquery code 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

这是一种更有效的解决方法

#4

.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();
});

#5

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, delegate is 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 mouseenter and mouseleave.

其次，委托将事件处理程序分配给子进程，因此您需要首先指定一个选择器。如果您需要确保这个事件处理程序存在于动态添加的元素中，我希望在这里使用mouseenter和mouseleave。live()。

$('#mydiv').live('mouseenter', function() {  
    $('#seconddiv').show();  
}).live('mouseleave', function() {  
    $('#seconddiv').hide();  
});

#1