Question

Having a bit of an issue accessing dynamically added DIV’s immediately after they’ve been added to the DOM.

I have a function roughly like this that takes an input, get’s the JSON data and creates a 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()
 };

Then I have a second function which basically I just want to create an array of all the DIV’s on the page of class “Word”. (It is so I can save each new div to a separate JSON file later).

So the second function which is called at the end of the one above is called Save Attribs, and for now I’m just in debug mode, so using 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]);
}

The problem is that when it write to the console it is always 1 div behind. So after I add the first, it returns nothing, the second returns the first, the third returns the first and second and so on.

What can I do to make sure it grabs the most up do date list of DIV’s – or waits until they are fully loaded?

Based on response here is a more complete version of the first function.

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

You need to call it after the insert, so inside the $.getJSON() callback, like this:

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

The callback functions runs later when the request completes, so currently your saveAttribs() runs before the <div> is actually added…by making the call in the callback after the append like above will give you the latest elements.