Using jquery .next() with javascript generated content selector not working <p>So, I have gone round and round on this issue and all I can come to is that this is an inherent flaw in jquery, but I'm posting this question here as a last resort.</p> <p>Here's the 1,000 ft view of the project. I'm making a slideout feature similar to the new Google Image search results. I have a grid of boxes, some that expand for deeper content and some that do not. The way I am accomplishing this is by running the below javascript to dynamically add 'row' divs below each row of grid boxes that has expandable content.</p> <pre><code>function defineFocusRowLength() { var rowFocusBoxCount = 0; $('#isofocus .focusbox.core').each(function(){ rowFocusBoxCount++; if($(this).css('float') === 'right') { finalFocusRowBoxCount = rowFocusBoxCount; return false; } }); $('#isofocus .slidecontent').remove(); $('#isofocus .focusbox.core:nth-child('+finalFocusRowBoxCount+'n)').after('&lt;div class="slidecontent"&gt;&lt;div class="wrap"&gt;&lt;/div&gt;&lt;/div&gt;'); if($('#isofocus .focusbox.core').last().css('float') === 'right') { // do nothing because it should have been caught by the previous line } else { $('#isofocus .focusbox.core').last().next('.focusbox').each(function(){ if($(this).css('float') === 'right') { if($(this).next('.focusbox').css('float') === 'right') { $(this).next('.focusbox').after('&lt;div class="slidecontent"&gt;&lt;div class="wrap"&gt;&lt;/div&gt;&lt;/div&gt;'); } else { $(this).after('&lt;div class="slidecontent"&gt;&lt;div class="wrap"&gt;&lt;/div&gt;&lt;/div&gt;'); } } }); } } defineFocusRowLength(); $(window).resize(function() { defineFocusRowLength(); }); </code></pre> <p>In case you are wondering, I am calling this function on window.resize as well because my site is responsive, so as the grid reorganizes this function removes the old expanded rows and creates new ones in the appropriate spaces.</p> <p>This part of my code all works beautifully. No problems whatsoever. However, it's when I try to target these new divs with .next() that completely fails.</p> <p>Here is the code I execute when you click the in each box:</p> <pre><code>$(".focusbox a.popup").click(function(){ var expandtext = $(this).parents('.focusbox').children('.expanded-content').html(); $(this).parents('.focusbox').next('.slidecontent').html(expandtext); $(this).parents('.focusbox').next('.slidecontent').slideToggle(); }) </code></pre> <p>Now, I have tried about 20 other variations of this code and they work. It is just this specific way I am needing it to work that fails. Here are some of the variations I used that worked, but were not the proper result:</p> <pre><code>$(this).parents('.focusbox').next().slideToggle(); //works, but slides up the next box, not the expanded row $(this).parents('.focusbox').siblings('.slidecontent').slideToggle(); //works but shows all expanded rows $(this).parents('#isofocus').find('.slidecontent').slideToggle(); //works but shows all expanded rows </code></pre> <p>So yeah, I'm pretty much at my wits end here and believe that this is just inherintly a flaw in jquery that the .next() function is unable to access selectors of content that is generated after page load, even if the function is not called until after the page has loaded. </p> <p>Here is my jsfiddle for you to take a stab at it: <a href="http://jsfiddle.net/RCVfK/1/" rel="nofollow">http://jsfiddle.net/RCVfK/1/</a></p>