2012-04-26 1 views
7

私のページで何かをするためにdocument.readyイベントを待っています。HTML要素がクラスを取得してから何かを行うまで待つ

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

これは、要素が特定のクラスを取得してから何かを行うまで、関数が聴くようにするためです。

どうすればよいですか?このような

+0

この他のスクリプトを制御しますか?コードを他のコードのコールバックとして呼び出すことはできませんか? – j08691

+0

または他のスクリプトでカスタムイベントを発生させる – rgvcorley

+0

この質問の重複のように見えます:http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed –

答えて

3

クラスを追加すると、イベントが発生する可能性があります。

例:

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


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

サムシング(擬似コード):

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()で委任されたイベント。

+0

タイマーのアプローチは魅力的に機能しました。 – k0pernikus

+0

それに3つのdownvotesがありますが、そのような単純なsetIntervalは多くのリソースを使用せず、うまく動作しますが、数秒後に間隔をクリアするタイムアウト関数のような、 。挿入されたDOMノードをリッスンするためのjQuery関数がおそらくこれを実行する最良の方法ですが、ハンドラが削除されない限り、classNameの挿入された要素をすべてチェックします。これは私の意見ではsetIntervalを持つよりも悪いです。 – adeneo

+0

@adeneo素晴らしい返信、よくできて、ありがとう:) –

0

私はあなたの質問が間違ってましたが、なぜだけdocument.ready上でこのように平易な何かをやっていない場合はごめんなさい! :

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

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

私はこのクラスで要素を追加しません。それは別のスクリプトによって追加されます。そして、私はその変更をキャッチし、その後、それにいくつかの魔法をかけます。 – k0pernikus

+0

可能であれば、別のスクリプトでコールバックを追加する方が良いかもしれませんか? – Vytautas

関連する問題