Selecting element dynamically added
<p>I'm trying to asynchronously load data from mysql. First, on page load I add multiple divs to the page:</p>

<pre><code>$(document).ready(function(){
        // Layout
        var main = $("#main-div");
        for(var i = 0; i &lt; array.length; ++i) {
            main.append("&lt;div class='container'&gt;&lt;a href=\"blah\"&gt;"+array[i]+"&lt;/a&gt;&lt;div class='button-container'&gt;&lt;span id='playcount_"+array[i]+"' class='playcount' style='margin-right:5%'&gt;nope&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;");
        }
        // Get info for each sound in array
        for(var i = 0; i &lt; array.length; ++i) {
            $.post("script/php_getinfo.php", { "file": array[i] }, updatePlaycount, "json");
        }
});
</code></pre>

<p>The <code>container</code> divs are added with a <code>span</code> with an id of <code>playcount_A</code>, <code>playcount_B</code>, etc. After the divs are added, a <code>POST</code> is made per item in the array and calls <code>updatePlaycount</code> upon success.</p>

<p>updatePlaycount attempts to select the element and insert text into the <code>span</code>:</p>

<pre><code>function updatePlaycount(data) {
    $('#playcount_'+data.name).text(data.playcount);
}
</code></pre>

<p>The function correctly gets the <code>data.name</code> and <code>data.playcount</code> fields (for example <code>A</code> and <code>1</code>), but for some reason jQuery cannot find <code>#playcount_A</code>! Surely they've been added already, since there's no loading involved with adding the divs...</p>
