javascript - HTML要素がクラスを取得するまで待ってから、何かを実行します

Question

私は自分のページで何かをするためにdocument.readyイベントを待っています。

残念ながら、私が変更できない他のスクリプトは、スクリプトが呼び出された後はまだその魔法を働かせていません。したがって、クラスがDOMにまだ存在しないため、クラス名でのjqueryの選択は失敗します。

これが、要素が特定のクラスを取得するまでリッスンし、それを使って何かを実行するように関数に指示したい理由です。

どうすればこれを達成できますか？

Answer 1

このようなもの（疑似コード）：

var timer = setInterval(function() {
   if (element.className=='someclass') {
       //run some other function 
       goDoMyStuff();
       clearInterval(timer);
   }
}, 200);

または挿入される要素をリッスンします。

function flagInsertedElement(event) {
   var el=event.target;
}
document.addEventListener('DOMNodeInserted', flagInsertedElement, false);

jQuery のバージョン:

$(document).on('DOMNodeInserted', function(e) {
    if (e.target.className=='someclass') { 
        goDoMyStuff();
    }
});

liveQueryプラグインもあります。

$("#future_element").livequery(function(){
    //element created
});

または、これが通常のイベント ハンドラーの場合は、jQuery の on(); でイベントを委任します。

Answer 2

クラスを追加すると、何らかのイベントをトリガーできます。

例：

$('#ele').addClass('theClass');
$(document).trigger('classGiven')


$(document).bind('classGiven',function(){
    //do what you need
});

Answer 3

質問が間違っていたら申し訳ありませんが、 document.ready でこのように単純なことをしないのはなぜですか? :

$("#myelement").addClass('myclass');

if($("#myelement").hasClass('myclass')) {
    alert('do stuff here');
}