StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAppending dynamically generated html using jQuery does not play well with Fancybox
text
Body
copied!<p>I'm using Fancybox (<a href="http://fancybox.net" rel="nofollow noreferrer">http://fancybox.net</a>) to pop open an iFrame. In order to do so, I create a link with a class set to "item_pop" as so:</p> <pre><code><div id="events"> <a href="http://www.example.com" class="item_pop">My Link</a> </div> </code></pre> <p>I then have some JavaScript in the footer that supports this:</p> <pre><code>jQuery(".item_pop").fancybox({ 'width' : 900, 'height' : 500, 'autoDimensions' : true, 'autoScale' : true, 'transitionIn' : 'elastic', 'titleShow' : false, 'transitionOut' : 'elastic', 'centerOnScroll' : true, 'type' : 'iframe' }); </code></pre> <p>Ok, so this all works swimmingly. The problem is that I use jQuery to create additional links like this on the fly as so:</p> <pre><code>jQuery(document).ready(function(){ update_seconds = 20; update_duration = update_seconds * 1000; window.setInterval(reload_events, update_duration); }); function reload_events() { jQuery.post("http://www.example.com", {type:'any'}, function(data){ var events = eval(data); var html = ''; for(var i=0; i<events.length; i++){ var evt = events[i]; html += '<a href="http://www.example.com" class="item_pop">My Link</a>'; } jQuery('#events').children().remove(); jQuery('#events').append(html); }); } </code></pre> <p>This actually displays the links to screen, but when you click on them they don't pop up the iFrame. Instead they open the intended page as a new page, rather than as an iFrame inside the existing page.</p> <p>Any ideas? Cheers</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