元素异步加载后，如何将其添加到元素中？

Question

My problem is when the element is loaded by AJAX and it's appended in the DOM during the success callback the addClass method executes too soon and the transitions are not displayed.

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

Problem without ajax: demo

Answer 1

Maybe you need to use some like:

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

This is run antil the element exist and class has been adedded. (sorry for bad english)

Answer 2

You should try sync ajax call ie async: false

refer following link for more detail http://api.jquery.com/jquery.ajax/

Answer 3

Manipulating the DOM is really resource intensive. While a new element is under construction it was given it's class attribute. My solution is preparing a wrapper element before manipulating the DOM, and modifying the class attribute only on the wrapper. Right after the new element has been created I have inserted a new empty wrapper for further content loading.

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);