Есть ли у jQuery указатель на .delegate ('hover')?

Question

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

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

Answer 1

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

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

Вы можете легко перенести решение 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' );  
});

Answer 2

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

Кроме того, .delegate() принимает только одну функцию, поэтому для события hover необходимо проверить event.type, чтобы определить show() ^{(документы)} или hide() ^{(документы)} .

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

Для отображения / скрытия, более короткий способ написать это - использовать toggle() ^{(документы)} , который может принять переключатель аргумент, где true означает show, а false означает hide:

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

Обратите внимание, что событие mouseenter сообщается как jQuery 1.4.3. Если вы используете 1.4.2, это будет сообщено как mouseover.

---

РЕДАКТИРОВАТЬ:

Если я понимаю ваши комментарии ниже, у вас будет что-то вроде этого (конечно, с использованием правильных селекторов).

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

Answer 3

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

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

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

.someContainer .seconddiv{
    display : none;
}

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

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

Answer 4

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

Answer 5

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

Вы можете попробовать что-то вроде этого, однако:

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