クラスを非同期にロードした後、そのクラスにクラスを追加するにはどうすればよいですか？

Question

私の問題は、AJAXによって要素が読み込まれ、成功コールバック中にDOMに追加され、addClassメソッドがすぐに実行され、遷移が表示されないときです。アヤックスのない

$.ajax({ 
    url : contentURL, 
    type : "GET", 
    dataType : "html", 
    success : function(response){ 
     $content.append(response); 
     $activeSection = $('#'+href); // appended element 
     $activeSection.addClass("open"); // class is added before appending 
    } 
}); 

問題：demo

Answer 1

本当に資源集約されたDOMを操作するための次のリンクを参照してください。新しい要素が作成中にクラス属性が与えられました。私の解決策は、DOMを操作する前にラッパー要素を準備し、ラッパーでのみクラス属性を変更することです。新しい要素が作成された直後に、コンテンツの追加読み込みのために新しい空のラ​​ッパーを挿入しました。

my solution

function addClass(el, classN) { 
    var hasClass = el.className.search(classN)+1; 
    if (hasClass) { 
     return true 
    } else { 
     el.className += el.className ? " "+classN : classN; 
    } 
} 
function removeClass(el, classN) { 
    var re = new RegExp("\\s*"+classN, "ig"); 
    el.className = el.className.replace(re, ""); 
    if (el.className.length === 0) { 
     el.removeAttribute("class"); 
    } 
} 
function dropping (el, classN, duration){ 
    addClass(el, classN); 
    setTimeout(function(){ 
    el.parentNode.removeChild(el); 
    state2 = null; 
    }, duration); 
} 
function opening(e) { 
    if (!open) { 
    open = true; 
    addClass(w1, "open"); 
    addClass(w2, "open"); 
    addClass(state0, "open"); 
    state1 = state0; 
    state0 = conClear.cloneNode(true); 
    w3.appendChild(state0); 
    } 
} 
function closing(e) { 
    if (open) { 
    open = false; 
    removeClass(w1, "open"); 
    removeClass(w2, "open"); 
    dropping(state1, "drop", 1000); 
    state2 = state1; 
    state1 = null; 
    } 
} 
function paging(e){ 
    if (open) { 
    dropping(state1, "drop", 1000); 
    state2 = state1; 
    addClass(state0, "open"); 
    state1 = state0; 
    state0 = conClear.cloneNode(true); 
    w3.appendChild(state0); 
    } 
} 
var open = false; 
var bO = document.getElementById("open"); 
var bC = document.getElementById("close"); 
var bP = document.getElementById("page"); 

var w1 = document.getElementById("wrapper1"); 
var w2 = document.getElementById("wrapper2"); 
var w3 = document.getElementById("wrapper3"); 
var con = w3.getElementsByClassName("content").item(0); 
var state0 = con; 
var state1 = null; 
var state2 = null; 
var conClear = con.cloneNode(true); 

bO.addEventListener("click", opening, false); 
bC.addEventListener("click", closing, false); 
bP.addEventListener("click", paging, false); 

Answer 2

たぶん、あなたは、いくつかのようなを使用する必要があります。これは、要素antil実行され

setInterval(function(){ 
    if($('#elementId').html() != null) { 
     $('#elementId').addClass('.class'); 
     return; 
    } 
    console.log('Working...'); 
    }, 1000); 

が存在し、クラスがadeddedされています。 （申し訳ありません英語悪いため）

Answer 3

あなたは同期AJAX呼び出し を試してみてください、すなわち非同期：偽

より詳細 http://api.jquery.com/jquery.ajax/