JQuery .toggle() и кнопка браузера

Question

У меня довольно простая компоновка с очень странным результатом.

$(".main").on("hover", ".js_post", function() { 
$(this).children('.js_del').toggle(); 
}); 

По существу, когда пользователь парит над .js_post DIV, то .js_del DIV переключается. Вот CSS, который скрывает .js_del:

.js_del { display:none; } 

Теперь, когда курсор находится над .js_post, то .js_del DIV переключается, как и ожидалось. Но когда пользователь нажимает на ссылку в div .js_post, а затем нажимает кнопку браузера, происходят странные вещи ...

В FF все работает так, как можно было бы ожидать (т. Е. Браузер интерпретирует щелчок как mouseleave и переключает .js_del.)

В Safari, однако, когда пользователь щелкает назад, браузер применяет переключатель в обратном направлении (т. е. отображается значок .js_del и когда курсор наводится на .js_post, ссылка .js_del исчезает .)

Даже страннее ...

Я решил добавить обработчик вручную скрыть .js_del DIV всякий раз, когда «А» элемент в .js_post щелкают, как это:

$(".js_post").find("a").click(function() { 
    $(this).parents('.js_post').children('.js_del').hide(); 
}); 

И сейчас, если смотреть в Safari, все работает, как ожидалось, но в FF, это обратное (т.е. .js_del показывает и, когда курсор находится над .js_post, ссылка .js_del исчезает)!

Любые мысли ??? Благодаря!

Answer 1

Поскольку кнопка «Назад» не делает поведение кеша страницы одинаковым, и вы не можете быть уверены в состоянии элемента dom, вызовы toggle() могут быть грубыми. Я разделил центр мыши и mouseleave вместо hover() и специально вызвал видимость в селекторе. Я также бросил вызов .hide() в самом конце, чтобы стандартизировать состояние видимости элемента dom независимо от проблем браузера кнопки назад.

JS

$(".main").on({ 
    "mouseenter":function(evt){ 
    $(this).children('.js_del:hidden').toggle(); 
    }, 
    "mouseleave":function(evt){ 
    $(this).children('.js_del:visible').toggle(); 
    } 
}, ".js_post", null).find('.js_del:visible').hide();