ランタイムにDOMにCSSのクラスを追加しました

Question

私のページにはサードパーティのJavaScriptがいくつか含まれています。

<a class="foo">some link</a> 

私はこれがに変更されていることを確認する必要があります：要素をページに追加され

<a class="bar">some link</a> 

できるだけ早く後にこのページにページがロードされた後しばらくして、次の要素を追加します。私はjQueryの準備ができてハンドラに

$('a.gullSearchBtn').removeClass('gullSearchBtn').addClass('roundButton'); 

を以下を追加してみました。しかし、これは要素が追加される前に実行されるため、動作しません。私はウェブを検索しましたが、 "livequery"と呼ばれるjQueryの機能が私の問題の解決策になるかもしれませんが、動作させることはできません。

Answer 1

ネイティブスタイルを使用して、setTimeout関数を使用して終了するかどうかを確認するだけです。あなたが例えばその要素を識別するためのユニークな方法を持っている場合しかし、これはのみ動作します。それがfooクラスで唯一のアンカー要素である

マイ推奨ループ

$(document).ready(function(){ 
    checkTimer(); 
}); 

function checkTimer(){ 
    var ele = $('a.foo'); 
    if(ele.length == 0){ 
     setTimeout(function(){ 
      checkTimer(); 
     },100); 
    } 
    else { 
     ele.attr('class','bar'); 
    } 
} 

をいくつかは、あなたが使用することをお勧めします上記のループと同じ機能を提供するsetInterval（）。私は個人的な経験から、これが壊れやすいことをどのようにしているかを知っていますが、ここにはそのバージョンのコードがあります。

たsetInterval（）ループ DOMNodeInsertedまたはDOMSubtreeModifiedへの結合

var timer; 
$(document).ready(function(){ 
    timer = setInterval(function(){ 
     checkTimer(); 
    },100); 
}); 

function checkTimer(){ 
    var ele = $('a.foo'); 
    if(ele.length != 0){ 
     ele.attr('class','bar'); 
     clearTimeout(timer) 
    } 
} 

Answer 2

は、これを達成を助けることができます。しかし、以下の記事によると、これはIE

How to detect new element creation in jQuery?

Answer 3

• では動作しませんデモ：http://so.devilmaycode.it/change-css-classes-of-element-added-to-dom-at-runtime

 $(function() { 
      $('.foo').click(function(e) { 
       $('body').append('<p class="gullSearchBtn">text</p>'); 
       return false; 
      }); 

      setInterval(function() { 
       if ($('.gullSearchBtn').length) 
        $('.gullSearchBtn').removeClass('gullSearchBtn').addClass('roundButton'); 
        //clearInterval() optional if you don't need to loop anymore... 
      }, 100); 
     }); 

Answer 4

あなたはこのことを考えられていますか？

オリジナルCSS

.roundButton { 
    [your rules] 
} 

変更CSS

.gullSearchBtn, .roundButton { 
    [your rules] 
}