Databases
StackOverflow2013
Postsdbo
POWhy is JQuery not 'finding' appended divs?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is JQuery not 'finding' appended divs?
    text
    copied!<p>I have a function that appends some HTML to a section within a form when a button is clicked using this snippet:</p> <pre><code>function add_series() { $(document).on("click", "a.add-another-series", function(e) { e.preventDefault(); // Get the containing div that we will append the retrieved HTML to $container = $(this).parent().parent().parent().parent(); // Get the HTML via ajax and append it to the containing div $.get('ajax/add-series/' + study_number + '/' + series_number, function(data){ $container.append(data); }); }); } </code></pre> <p>Here is the (cut-down) HTML structure that is returned to the calling function via AJAX (CAPS indicates this text is a variable):</p> <pre><code>&lt;div class="series" data-study-number="STUDY_NUMBER" data-series-number="SERIES_NUMBER"&gt; &lt;h4&gt;series SERIES_NUMBER&lt;/h4&gt; &lt;div class="row"&gt; &lt;div id="RANDOM_ID" class="small-12 columns large-centered uploader"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>This works fine and shows up on the page as expected.</p> <p>What I need to do is grab the div with id=RANDOM_ID from within the first function (the 'on click' one at the beginning of this question). To test, I tried to grab all of the .series divs with the following selector:</p> <pre><code>$series_divs = $('.study[data-study-number="' + STUDY_NUMBER + '"]').find('.content').find('.series'); </code></pre> <p>This only seems to return the .series divs that existed before the .append() call. It doesn't return the one I just appended. Am I doing something wrong here?</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