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