dynamisch hinzugefügt Inhalte über Ajax-Aufruf kann nicht mit jquery

Question

gezielt ich dynamisch html über Ajax-Aufruf generiert am Ball passen, siehe einfaches Beispiel unter

var loadContent = function(){ 

    $.ajax({ 
     url: '/url', 
     method: 'GET' 
    }).success(function (html) { 

     $('.content-wrapper').replaceWith(html); 

    }) 

    //this is how simple returned html looks like 
    //<div class="content-wrapper"><ul"><li>test</li></ul></div> 

}; 

jetzt, wenn ich versuche, li Ziel nichts hinzuzufügen Klasse geschieht

var testAjaxGeneratedHtml = function() { 
    loadContent(); 
    $('.content-wrapper ul li').addClass('test'); 
} 

Answer 1

ajax ist asynchrone Anforderung es so fügen sie für die Antwort nicht Klasse innerhalb Erfolgsfunktion wartet, nachdem ajax seine Aufgabe

var loadContent = function(){ 

    $.ajax({ 
     url: '/url', 
     method: 'GET' 
    }).success(function (html) { 

     $('.content-wrapper').replaceWith(html); 
     $('.content-wrapper ul li').addClass('test'); 


    }) 

    //this is how simple returned html looks like 
    //<div class="content-wrapper"><ul"><li>test</li></ul></div> 

}; 

vollständig durchgeführt hat

Answer 2

Nitin Antwort ist richtig, aber ich hatte das Gefühl ein wenig mehr Erklärung hinzufügen könnte ...

meisten Javascript-Funktionen synchron sind - jeder Schritt zu beenden, bevor der nächste beginnen kann. Ajax ist anders, da es aus einer Anfrage und einer Antwort besteht. Er sendet die Anfrage und richtet einen Listener ein, der auf die Antwort wartet und sie verarbeitet, wenn sie kommt. Sobald dieser Listener erstellt wurde, kann der Code weiterhin ausgeführt werden, während die Antwort noch aussteht.

In diesem Fall senden Sie eine Anfrage und bearbeiten dann das DOM, bevor die Antwort zurückkommt. Vermutlich ein Bruchteil einer Sekunde später kommt die Antwort an, Ihre "Erfolgs" -Funktion verarbeitet sie, und dies überschreibt, was Sie gerade erreicht haben. Wahrscheinlich ist die beste Lösung zu tun, wie Nitin vorgeschlagen hat, und setzen Sie diese Linie in Ihre success Handler, aber wenn man es in der testAjaxGeneratedHtml aus irgendeinem Grund tun müssen, können Sie es als eine Funktion definieren:

Anmerkung: ungetesteten Code

var loadContent = function(onSuccess){ 

    $.ajax({ 
     url: '/url', 
     method: 'GET' 
    }).success(function (html) { 

     $('.content-wrapper').replaceWith(html); 
     onSuccess(); 

    }) 

    //this is how simple returned html looks like 
    //<div class="content-wrapper"><ul"><li>test</li></ul></div> 

}; 

var testAjaxGeneratedHtml = function() { 
    loadContent(function() { $('.content-wrapper ul li').addClass('test'); }); 
}