Fancybox dont see append() objects

Question

I have a JS code like this

<script type="text/javascript">
$(document).ready(function(){
        $('.main').on('click', '.block', function (){
        $('.main').append('<div class="block">Some Text<br/><a class="show" href="http://google.com">Add element</a</div>');
    });

    $("a.show").fancybox(
    {                       
        "padding" : 20,
        "imageScale" : false, 
        "zoomOpacity" : false,
        "zoomSpeedIn" : 1000
    });
});
</script>

and html:

<div class="main"><div class="block">Some Text<br/><a class="show" href="http://google.com">Add element</a</div>
</div>

When virtual objects ".block" are appended to ".main", Fancybox does not launch

fancyBox: http://fancybox.net , use fancyBox 1.2.1

because you append stuff after the DOM has loaded. Copy the $("a.show") stuff after the $('.main').append — Rumplin, Jun 27 '12 at 06:54
http://stackoverflow.com/questions/3574100/appending-dynamically-generated-html-using-jquery-does-not-play-well-with-fancyb should help, and please improve your accept ratio, `:)` — Tats_innit, Jun 27 '12 at 06:58

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

This is because fancybox v1.3.x doesn't support dynamically added elements (when using append() or any other jQuery method that adds elements after the DOM is ready).

Check https://stackoverflow.com/a/9084293/1055987 for a workaround.

edited May 23 '17 at 11:56

Community

1
1

answered Jun 27 '12 at 17:10

JFK

40,963
31
133
306

Fancybox dont see append() objects

1 Answers1