web-dev-qa-db-fra.com

evénement de type onHide () dans jQuery

Est-ce que quelqu'un connaît un événement onHide () ou quelque chose de similaire dans jQuery? 

J'ai essayé: 

$(this).bind('hide', function(){
    console.log('asdasda')
})

Mais apparemment, ça ne marche pas. 

Edit: .__ Juste pour clarifier, il est caché en utilisant CSS display:none.
Je connais la fonction de rappel, mais comme je ne la cache pas (le CSS est), je ne peux pas l'utiliser. Pour ce que ça vaut, je dois vérifier quand une liste déroulante est visible. Cela est montré par les CSS suivants: 

ul li:hover ul {
    display: block;
}
jqueryeventsjavascript-events
34
Sam

Il n'y a pas d'événement "hide" pour aucun élément HTML dans le DOM. Comment cachez-vous vos éléments? Utilisez-vous CSS pour modifier l'affichage ou la visibilité?

Si vous utilisez display: none pour masquer un élément, vous ne pouvez pas détecter quand CSS change. Dans IE, vous pouvez détecter le moment où une propriété est modifiée, mais cela ne s'étend pas aux valeurs de style. Vous aurez besoin de lancer un événement ou de faire ce qu'il fait au moment où l'affichage CSS est modifié.

10
sohtimsso1970

Il n'y a pas d'événement "hide" natif ou intégré, mais si vous utilisez jQuery pour le masquer, vous pouvez facilement ajouter un événement masqué:

var _oldhide = $.fn.hide;
$.fn.hide = function(speed, callback) {
    $(this).trigger('hide');
    return _oldhide.apply(this,arguments);
}
70
PetersenDidIt

Vous pouvez passer la fonction de rappel dans la fonction de masquage.

function iAmCallBackForHide() { 
             alert('I am visible after hide'); 
}
$('#clickMeToHide').hide( iAmCallBackForHide );
13
Faisal Ahsan

Pour ceux qui trouveront ce post deux ans plus tard:

Vous savez exactement quand le menu est visible, non?! La règle CSS vous dit. Ainsi, au lieu de compter sur les événements onShow ou onHide, vous pouvez recréer la même règle à l'aide de jQuery et vous appuyer sur le même "événement survol":

$('ul li').hover(function () {
    // Whatever you want to do 'onShow'
}, function () {
    // Whatever you want to do 'onHide'
});

De plus, votre script agit maintenant indépendamment de toute feuille de style, de sorte que les détails de la présentation ne dictent pas le comportement du site Web (Nice).

5
user241168

J'ai récemment créé un plugin pour détecter le moment où un élément est masqué ou affiché de quelque manière que ce soit (par JavaScript, l'inspecteur ou le masquage/affichage de jQuery).

pratik916/jQuery-HideShow

Cette extension continue à surveiller l'élément pour le changement de visibilité. une fois changé, il émettra un événement où vous pourrez gérer vos affaires

$("#test_hidden").hideShow(function(e, visibility){
    if(visibility == "shown") {
        console.log("Element is visible");
    } else {
        console.log("Element is hidden");
    }
})
2
Pratik Soni

Dans jQuery 3 expose les événements "masquer" et "afficher".

$(document).on("hide", function() { 
    console.log("browser page has been hidden");
});
1
trn

Facile à utiliser, utilisez Observateurs de la mutation DOM pour cela:

JS:

var observer = new MutationObserver(function(mutations) {
    console.log('div hide event fired!');
  });
  var target = document.querySelector('.mydiv');
  observer.observe(target, {
    attributes: true
  });

HTML:

<div class='mydiv'>
</div>

Voici le violon https://jsfiddle.net/JerryGoyal/qs01umdw/2/

1
JerryGoyal

Cela peut être utile dans certains cas d'utilisation: Utilisation de waitUntilExists jquery plugin ( Comment attendre qu'un élément existe? ) Vous pouvez détecter le changement de valeur

$(li:hidden).waitUntilExists(function(){                        
   // your code when it is hidden 
}, /*onlyOnce = */ true);

Je l'ai utilisé pour détecter quand un gif de chargement était caché.

0
Paco Zarate