jQuery 中的 onHide() 类型事件答案

【问题标题】：onHide() type event in jQueryjQuery 中的 onHide() 类型事件
【发布时间】：2011-02-20 22:08:18
【问题描述】：

有人知道onHide() 事件或 jQuery 中的类似事件吗？

我试过了：

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

但显然这不起作用。

编辑：
澄清一下，它是使用 CSS display:none 隐藏的。
我知道回调函数，但因为我没有隐藏它（CSS 是）我不能使用它。对于它的价值，我需要检查下拉菜单何时可见。它由以下 CSS 显示：

ul li:hover ul {
    display: block;
}

【问题讨论】：

stackoverflow.com/questions/941113/…

标签： jquery events jquery-events

【解决方案1】：

没有原生或内置的“隐藏”事件，但如果您使用 jQuery 隐藏它，您可以轻松添加隐藏事件：

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

【讨论】：

不幸的是我没有隐藏它，它被我的 CSS 隐藏了。
这是一个很酷的 hack，但我个人宁愿覆盖 core jq
很酷，只要使用$.hide()隐藏元素；
我在 GitHub 上启动了一个项目以提供更通用的解决方案：github.com/hypesystem/jquery.hide-event.js
我认为this 是同一解决方案的一个稍微优雅的版本，因为它不会留下一个 var。加一个提前交货！

【解决方案2】：

你可以在隐藏函数中传递回调函数。

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

【讨论】：

这是最正确的答案。砰砰！
这很好，请记住，当您指定一个回调函数来隐藏（或显示）它们时，它们会成为默认持续时间为 400 毫秒的动画函数。如果有问题，请指定 0：$('#clickMeToHide').hide( 0, iAmCallBackForHide );

【解决方案3】：

DOM 中的任何 HTML 元素都没有“隐藏”事件。你是如何“隐藏”你的元素的？您是否使用 CSS 来更改显示或可见性？

如果您使用 display:none 隐藏元素，则无法检测 CSS 何时更改。在 IE 中，您可以检测到属性何时更改，但不会扩展到样式值。您需要在 CSS 显示更改时引发事件或执行事件正在执行的任何操作。

【讨论】：

使用MutationObservers 现在可以监听 dom 节点上的属性变化，包括我相信的样式和类属性......所以问题的答案应该是 yes.
如果您使用 jQuery 的 .css('display','none')，github.com/hypesystem/jquery.hide-event.js 应该支持它 - 只需监听“隐藏”事件。

【解决方案4】：

两年后发现这篇文章的人：

您确切地知道菜单何时可见，对吧？！ CSS 规则告诉你。因此，您可以使用 jQuery 重新创建完全相同的规则并依靠完全相同的“悬停事件”，而不是依赖 onShow 或 onHide 事件：

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

此外，您的脚本现在独立于任何样式表，因此演示细节不会决定网站行为（很好）。

【讨论】：

如果鼠标是唯一的输入，则此解决方案有效。如果应用程序支持键盘或触摸界面，那么这还不够。
没错，@jbustamovej，但问题中的 li:hover 也不起作用。不过好点。

【解决方案5】：

在 jQuery 3 中公开了“隐藏”和“显示”事件。

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

【讨论】：

这很好，但我没有运行 3，但这对未来派人士来说是件好事：D

【解决方案6】：

我最近制作了一个插件来检测元素何时被隐藏或以任何方式显示（通过核心 javascript 或检查器或 jQuery 隐藏/显示）。

pratik916/jQuery-HideShow

此扩展程序会持续关注元素的可见性变化。一旦更改，它将发出一个事件，您可以在其中处理您的东西

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

【讨论】：

【解决方案7】：

简单易懂，请使用DOM mutation observers：

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>

这是小提琴https://jsfiddle.net/JerryGoyal/qs01umdw/2/

【讨论】：

这会在该 div 的每次更改时触发。如果你改变它也会触发，例如CSS 或添加一个类。为了使它仅在例如触发更改课程，您需要添加条件：if(mutations.attributeName === "class" && mutations.classList.contains("hidden") { ... 不是 that Easy-pizy，但仍然可行。

【解决方案8】：

这在某些用例中很有用：使用 waitUntilExists jquery 插件 (How to wait until an element exists?) 您可以检测值何时发生变化：

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

我用它来检测加载 gif 何时被隐藏。

【讨论】：