JQuery не работает

Я меняю свои коды на совместимость с jQuery 1.8, и я застрял в этом hover, который не работает. Когда я использовал то же самое с click, это сработало. Вот мой код, может ли кто-нибудь сказать мне, где я ошибаюсь?

$(document).on('hover', '.top-level', function (event) {
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function () {
  $(this).find('.dropfcnt').hide('blind', function () {
    $('.actionfcnt').hide();
  });
});

Ответ 1

Устаревший с jQuery 1.8: имя "hover" используется как сокращенное выражение для строки "mouseenter mouseleave". Он прикрепляет один обработчик событий для этих двух событий, и обработчик должен проверить event.type, чтобы определить, является ли событие mouseenter или mouseleave. Не путайте псевдо-событие-имя "hover" с помощью метода .hover(), который принимает одну или две функции.

Источник: http://api.jquery.com/on/#additional-notes

Это в значительной степени говорит обо всем, вы не можете использовать "hover" для этого:

$(document).on('mouseenter','.top-level', function (event) {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level',  function(){
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
});

Ответ 2

нет события "hover". есть функция .hover(), которая принимает 2 обратных вызова (как в вашем примере).

Ответ 3

.on функция имеет только 3 параметра: http://api.jquery.com/on/

Если вам не нужно, чтобы ваши обработчики также привязывались к динамически добавленным элементам, вы можете использовать старую добрую функцию hover с двумя обработчиками событий.

$('.top-level').hover(function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});

Кстати, $(selector).hover(handlerIn, handlerOut) является сокращением для $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.

Если вам нужно, используйте on для mouseenter и mouseleave событий:

$(document).on('mouseenter', '.top-level', function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});

Ответ 4

Try:

$(".top-level").on({
    mouseenter: function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
    },
    mouseleave: function (event) {
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
    }
});

ИЛИ

$(".top_level").on("hover", function(event) {
  if(event.type == "mouseenter") {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
  }
  else if (event.type == "mouseleave") {
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
  }
});

Ответ 5

Try

$('.top-level').hover(function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
}, function(){
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
});

Ответ 6

Попробуйте этот код с jquery 1.8, я думаю, что работа хорошо:

$(document).ready(function(){   
    $('.top-level').hover(
        function() {
            $( this ).find('.actionfcnt').show();
            $( this ).find('.dropfcnt').show();
        },
        function() {
            $( this ).find('.dropfcnt').hide('blind', function(){
                $('.actionfcnt').hide();
            });
        }
    );
});