Wird das DOM sofort mit jQuery aktualisiert?

Question

Ich habe eine externe JavaScript-Bibliothek, um einige formatierte Inhalte zu generieren. Nennen wir es ExternalLibrary.GenerateGutterDivs()

Dieser Code erzeugt eine Tabellenstruktur mit einigen divs, so etwas wie:

<table> 
    <tr> 
    <td class="gutter"> 
     <div>1</div> 
     <div>2</div> 
     <div>3</div> 
     ... 
    </td> 
    <tr> 
</table> 

Sobald die Tabelle erzeugen war, ich die erzeugte DOM-Objekte manipulieren wollen, wie folgt:

<script type="text/javascript"> 
    ExternalLibrary.generateGutterDivs(); 

    alert("shomething"); //if I comment this I don't see the second alert 

    $("td.gutter > div").each(function(index, val) 
    { 
     alert("gutterfound"); 
    }); 
</script> 

Das Problem ist, dass, wenn ich die erste alert("something") entferne, sehe ich nicht die zweite Warnung. Dieses make denken über das DOM vielleicht ist nicht sofort aufgefrischt. Weißt du, warum ich diese Situation erlebe?

Danke in fortgeschrittenem.

Answer 1

Dies ist ein häufiges Problem. Sie sollten einen Verweis auf die divs von MyCode.generateGutterDivs(), zum Beispiel zurückkommen:

MyCode.generateGutterDivs = function() { 
    var safeReference = $("<div>1</div><div>2</div><div>3</div>") 
     .appendTo("td.gutter"); 
    return safeReference; 
}; 

Dann:

<script type="text/javascript"> 
    var divs = MyCode.generateGutterDivs(); 

    divs.each(function(index, val) 
    { 
     alert("gutterfound"); // Should see 3 of these now 
    }); 
</script> 

Edit: Da die Bibliothek zu modifizieren für das Plakat ist keine Option, ich glaube, eine SetTimeout für 0 Millisekunden wird es tun, an den Browser wodurch man die Aktualisierung des DOM zu beenden:

<script type="text/javascript"> 
    MyCode.generateGutterDivs(); 

    setTimeout(function() { 
     divs.each(function(index, val) 
     { 
      alert("gutterfound"); // Should see 3 of these now 
     }); 
    }, 0); 
</script> 

Answer 2

MyCode.GenerateGutterDivs() hat die Generierung der DOM-Elemente nicht beendet, bevor das jQuery-Snippet ausgeführt wird. Sie müssen MyCode.GenerateGutterDivs() ändern, um eine Callback-Funktion, so etwas wie dies zu akzeptieren:

MyCode.GenerateGutterDivs(function() { 
    $("td.gutter > div").each(function(index, val) { 
     alert("gutterfound"); 
    }); 
}); 

//inside MyCode 
GenerateGutterDivs = function(callback) { 
    // Generate formatted content. 
    callback(); 
}; 

Hier ist ein Proof of Concept: http://jsfiddle.net/gnbNt/2/