У jQuery есть handleout для.делегат (наведении)?

Я пытаюсь использовать:

$('mydiv').delegate('hover', function() {  
    $('seconddiv').show();  
}, function() {  
    //For some reason jQuery won't run this line of code  
    $('seconddiv').hide();  
});

5 ответов


отличный ответ User113716 больше не будет работать в jQuery 1.9+, потому что псевдо-событие hover больше не поддерживается (руководство по обновлению).

С jQuery 3.0 delegate() для событий привязки официально устарел, поэтому, пожалуйста, используйте новая on()(docs) для всех целей привязки событий.

вы можете легко переносить user113716решение путем замены hover С mouseenter mouseleave перейти к on() синтаксис:

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

если ваша проблема сложнее, чем простая toggle, Я предлагаю связать два отдельных события:

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

NB: С hover был удален в v1.9 и on() был представлен в v1.7, никакая реальная потребность для решения используя delegate() - но если вам это нравится по какой-то причине; он все еще там (пока) и делает Иов:

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

С delegate()(docs) , вы назначаете его к контейнеру, и первый аргумент-это элемент, который должен инициировать событие.

и .delegate() принимает только одну функцию, поэтому для hover событие, которое вам нужно проверить event.type определить show()(docs) или hide()(docs) .

$('.someContainer').delegate('.someTarget','hover', function( event ) {
    if( event.type === 'mouseenter' )  
        $('seconddiv').show();  
    else
        $('seconddiv').hide();  
});

для Показать / Скрыть, более короткий способ написать это-использовать toggle()(docs), который может принимать переключатель


Я знаю, что ОП хотел delegate решение (как и я, когда я столкнулся с этим вопросом...)

, но после расследование я узнала, что его можно достичь того же без js / jquery кода

все, что вам нужно-это немного в CSS

.someContainer .seconddiv{
    display : none;
}

.someContainer:hover .seconddiv{
    display : block;
}

INMO это гораздо более эффективное / ligthwheigth решение


.delegate() не имеет рукоятки. Кроме того, вам нужно указать элемент, на который вы нацелены с первым параметром.

вы бы попробовать что-то вроде этого:

$('table').delegate('tr', 'hover', function() {  
    $(this).toggle();
});

EDIT: дезинформация удалена.

если вы хотите использовать hover() метод без делегирования, рабочий код будет выглядеть так:

$('#mydiv').hover(function() {  
    $('#seconddiv').show();  
}, function() {  
    $('#seconddiv').hide();  
});

во-вторых, delegate - назначить обработчик событий для ребенка, поэтому вам нужно указать первый селектор. Если вам нужно убедиться, что этот обработчик событий существует для динамически добавленных элементов, я бы предпочел .live() в данном случае с mouseenter и mouseleave.

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