onHide() type event in jQuery

Question

Does anyone know of an onHide() event or something similar in jQuery?

I tried:

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


        

Answer 1

I have recently made a plugin to detect when an element gets hidden or shown in any way ( by core javascript or inspector or jQuery hide / show ).

pratik916/jQuery-HideShow

This extension keeps watching on element for visibility change. once changed it will emmit an event where you can handle your stuff

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

Answer 2

Easy-pizy, use DOM mutation observers for this:

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>

Here's the fiddle https://jsfiddle.net/JerryGoyal/qs01umdw/2/

Answer 3

There isn't a native or built in "hide" event but if you are using jQuery to hide it you can easily add a hide event:

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

Answer 4

In jQuery 3 exposes a "hide" and "show" events.

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

Answer 5

This can be useful on some use cases: Using waitUntilExists jquery plugin (How to wait until an element exists?) you can detect when the value changes:

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

I used it for detecting when a loading gif was hidden.

Answer 6

There is no "hide" event for any HTML element in the DOM. How are you "hiding" your elements? Are you using CSS to change the display or visibility?

If you're using display:none to hide an element, you can't detect when CSS changes. In IE, you can detect when a property changes but that doesn't extend to style values. You'll need to throw an event or do whatever the event is doing at the time the CSS display is changed.