Databases
StackOverflow2013
Postsdbo
POGetting the most up-to-date list of div's when adding them dynamically using jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting the most up-to-date list of div's when adding them dynamically using jQuery
    text
    copied!<p>Having a bit of an issue accessing dynamically added DIV's immediately after they've been added to the DOM.</p> <p>I have a function roughly like this that takes an input, get's the JSON data and creates a div.</p> <pre><code> function addAttrib(attrib) { $.getJSON("file.json", function(data) { //Do all the stuff var newDiv = $("&lt;div class='word'&gt;"+label+"&lt;/div&gt;").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() }; </code></pre> <p>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).</p> <p>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.</p> <pre><code>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]); } </code></pre> <p>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.</p> <p>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?</p> <p>Based on response here is a more complete version of the first function.</p> <pre><code>function addAttrib(attrib) { $.getJSON("file.json", function(data) { //Cut out some vars for simplicity... var exists = $('#'+attrib).length; if (exists &gt;= 1) { $('#'+attrib).fadeOut("fast", function() { $(this).remove()} ); //$('.word').remove(); } else { var newDiv = $("&lt;div class='word' zone='"+data[attrib].ZoneName+"' map='"+$.wordTracker.currentMap+"' id='"+attrib+"'&gt;"+label+"&lt;/div&gt;").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(); }); </code></pre> <p>}</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload