Asenkronize olarak yüklendikten sonra bir öğeye nasıl sınıf ekleyebilirim?

Question

Sorun, öğenin AJAX tarafından yüklendiği ve başarı geri dönüşü sırasında addClass yönteminin çok yakında yürütüldüğü ve geçişlerin görüntülenmediği sırada DOM'a eklendiği zamandı. ajax olmadan

$.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 
    } 
}); 

Sorun: demo

Answer 1

gerçekten yoğun kaynak DOM kurgulama için aşağıdaki linki bakın. Yeni bir eleman yapım aşamasındayken, sınıf niteliğine sahipti. Çözümüm, DOM'ı işlemeden önce bir sınıf öğesi hazırlıyor ve sınıf özniteliğini yalnızca sarıcı üzerinde değiştiriyor. Yeni eleman oluşturulduktan hemen sonra, daha fazla içerik yüklemesi için yeni bir boş sarmalayıcı ekledim. tüm formları ve şekilleri

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

Belki bazıları gibi kullanmanız gerekir: Bu eleman Antil çalıştırılır

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

mevcut ve sınıf adedded edilmiştir. (Üzgün ​​ingilizce kötü için)

Answer 3

Senkronizasyon ajax arama denemelisiniz yani async: false

daha detaylı http://api.jquery.com/jquery.ajax/