Obtention de la liste la plus à jour des divs lors de leur ajout dynamique en utilisant jQuery

Question

Avoir un peu de problème pour accéder aux DIV ajoutés dynamiquement immédiatement après qu'ils aient été ajoutés au DOM.

J'ai une fonction à peu près comme ça qui prend une entrée, obtient les données JSON et crée un div.

function addAttrib(attrib) { 
    $.getJSON("file.json", function(data) { 
     //Do all the stuff 
     var newDiv = $("<div class='word'>"+label+"</div>").insertAfter("#mapLabels"); 
     var adjustedX = x - (newDiv.width()/2); 
     var adjustedY = y - (newDiv.height()/2); 
     newDiv.css("left",adjustedX); 
     newDiv.css("top",adjustedY); 
     newDiv.fadeIn("slow"); 
    }; 
    saveAttribs() 
}; 

Puis j'ai une deuxième fonction qui, fondamentalement, je veux juste créer un tableau de tous les DIV sur la page de classe « Word ». (C'est ainsi que je peux enregistrer chaque nouvelle div dans un fichier JSON séparé plus tard). Donc la deuxième fonction qui est appelée à la fin de celle ci-dessus est appelée Save Attribs, et pour l'instant je suis juste en mode debug, donc en utilisant console.log.

function saveAttribs() { 
    $.wordTracker.maps[$.wordTracker.currentMap] = []; 
    $.wordTracker.maps[$.wordTracker.currentMap].length = 0; 
    $(".word").each(function() { 
    //items.push($(this).text()); 
     $.wordTracker.maps[$.wordTracker.currentMap].push($(this).text()); 
    }); 
    console.log($.wordTracker.maps[$.wordTracker.currentMap]); 
} 

Le problème est que lorsqu'il écrit dans la console, il est toujours 1 div derrière. Donc, après avoir ajouté le premier, il ne renvoie rien, le second renvoie le premier, le troisième renvoie le premier et le deuxième et ainsi de suite.

Que puis-je faire pour m'assurer qu'il saisit la liste de date la plus à jour des DIV - ou attend jusqu'à ce qu'ils soient complètement chargés?

Basé sur la réponse voici une version plus complète de la première fonction.

function addAttrib(attrib) { 
$.getJSON("file.json", function(data) { 
    //Cut out some vars for simplicity... 
var exists = $('#'+attrib).length; 
    if (exists >= 1) { 
     $('#'+attrib).fadeOut("fast", function() { $(this).remove()}); 
     //$('.word').remove(); 
    } else { 
     var newDiv = $("<div class='word' zone='"+data[attrib].ZoneName+"' map='"+$.wordTracker.currentMap+"' id='"+attrib+"'>"+label+"</div>").insertAfter("#mapLabels"); 
     var adjustedX = x - (newDiv.width()/2); 
     var adjustedY = y - (newDiv.height()/2); 
     newDiv.css("left",adjustedX); 
     newDiv.css("top",adjustedY); 
     newDiv.fadeIn("slow"); 
    } 
    focusOnInput(); 
    saveAttribs(); 
}); 

}

Answer 1

Vous devez appeler après l'insert, donc à l'intérieur de la fonction de rappel $.getJSON(), comme ceci:

$.getJSON("file.json", function(data) { 
    //Do all the stuff 
    var newDiv = $("<div class='word'>"+label+"</div>").insertAfter("#mapLabels"); 
    var adjustedX = x - (newDiv.width()/2); 
    var adjustedY = y - (newDiv.height()/2); 
    newDiv.css({left: adjustedX, top: adjustedY).fadeIn("slow"); 
    saveAttribs(); 
}); 

Les fonctions de rappel fonctionne plus tard, lorsque la demande complète, donc actuellement votre saveAttribs() s'exécute avant que le <div> ne soit effectivement ajouté ... en faisant l'appel dans le rappel après l'ajout comme ci-dessus vous donnera les derniers éléments.