web-dev-qa-db-ja.com

jQueryのonHide（）タイプのイベント

誰もがonHide（）イベントまたはjQueryの類似物を知っていますか？

私は試した：

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

しかし、明らかにそれは機能しません。

編集：明確にするため、CSS display:none。
コールバック関数は知っていますが、非表示にしないので（CSSはそうです）、使用できません。価値があるものについては、ドロップダウンが表示されるタイミングを確認する必要があります。次のCSSで表示されています。

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

DOMのHTML要素には「非表示」イベントはありません。どのようにして要素を「隠している」のですか？ CSSを使用して表示または表示を変更していますか？

Display：noneを使用して要素を非表示にしている場合、CSSの変更を検出できません。 IEでは、プロパティがいつ変更されたかを検出できますが、スタイル値には拡張されません。 CSSの表示が変更されたときに、イベントをスローするか、イベントが実行していることをすべて行う必要があります。

10
sohtimsso1970

ネイティブまたは組み込みの「非表示」イベントはありませんが、jQueryを使用して非表示にする場合は、非表示イベントを簡単に追加できます。

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

Hide関数でコールバック関数を渡すことができます。

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

2年後にこの投稿を見つけた人には：

メニューが表示されるタイミングを正確に知っていますか？！ CSSルールが教えてくれます。したがって、onShowイベントまたはonHideイベントに依存する代わりに、jQueryを使用してまったく同じルールを再作成し、まったく同じ「ホバーイベント」に依存することができます。

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

また、スクリプトはスタイルシートから独立して動作するようになったため、プレゼンテーションの詳細がWebサイトの動作を決定することはありません（Nice）。

5
user241168

JQuery 3では、「非表示」および「表示」イベントを公開します。

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

Easy-pizy、このために DOMミューテーションオブザーバー を使用します。

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/

2
JerryGoyal

私は最近、要素が何らかの方法で非表示または表示されることを検出するプラグインを作成しました（コア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");
    }
})
2
Pratik Soni

これはいくつかのユースケースで役立ちます：waitUntilExists jqueryプラグインを使用して（ 要素が存在するまで待機する方法？ ）値が変更されたときに検出できます：

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

ローディングGIFが非表示になったことを検出するために使用しました。

0
Paco Zarate