要素の属性が変更されたときのjavascriptコールバック関数

Question

これはすでにここにあると確信しています。誰かが正しい方向に私を指すことができる場合は、それは素晴らしいだろう。

jQueryを使用して、Webページ内にタブシステムを作成しています。クエリの応答が終了すると、結果は新しいタブにロードされ、他のタブはCSS style="display: none;"に設定されます。このほとんどはjQueryUIによって処理されます。

これらのタブの内容が表示されていないとエラーをスローする機能があります。私はdocument.ready()のようなものを探しています。要素がまだDOMにロードされているため、項目が非表示になっても$('#tab-content').ready()が実行されるため、これは正確ではありません。要素の隠されたプロパティが変更されたときに実行されるコールバックで、約束事やイベントリスナーを設定することができますか？

私は$ .whenと$について次のドキュメントを読んだことがありますが、これを正しく実装するために約束や了解を完全に理解しているかどうかはわかりません。

http://api.jquery.com/jQuery.when/

http://api.jquery.com/ready/

http://api.jquery.com/deferred.then/

Answer 1

あなたは、要素が変更されたときに表示するMutation Observersを使用することができます。

私の例では、最初は非表示の段落を作成しています。オブザーバーがこの要素にセットアップされ、変更されたときには"change!"が記録されます。一番下に、私は突然変異を実行する要素を可視にしています。

要素が表示されているかどうかを確認するには、まずループ内でmutation.typeが"attributes"に等しいことを確認します。そうであれば、要素が表示されているかどうかを確認できます。

var testElement = document.getElementById('test-element'); 
 
    
 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
     console.log("change!"); // run some change when the style is mutated 
 
    });  
 
}); 
 
    
 
observer.observe(testElement, { 
 
    attributes: true 
 
}); 
 

 
testElement.style.display = "block"; // simulate a change

<p style="display: none;" id="test-element">Testing</p>

あなたが見終わったら、あなたは明らかに、もはや変更を探しますどのobserver.disconnect()を呼び出すべきではありません。