Apply jquery fancybox to elements loaded via ajax

Question

I am loading a bunch of data and adding it to a div. However, some of the items in the data are links that need to be used with fancybox. I am using fancybox 1.3.4. I've tried a few solutions such as $fancybox.init(); and $(document).ajaxStop(); and none have worked. Below is my code:

$.post('/ajax/ajax-page.php', $('#filter-results').serialize(), function(boardData){
    leaderboard.html(boardData);
    upper_top_title.text(sport_skill_level+" "+sport_grad_year);
    lower_top_title.text(sport_type+" Leaderboard");
    Cufon.replace('.t');

    // reload scripts necessary for data, fancybox and font
    $.getScript("/js/fancybox/jquery.fancybox-1.3.4.pack.js", function(){
        $.fancybox.init();
            $("a.video").fancybox({
                'transitionIn'  :   'elastic',
                'transitionOut' :   'elastic',
                'speedIn'       :   400, 
                'speedOut'      :   200, 
                'overlayShow'   :   true, 
                'showCloseButton' : true, 
                'width'         : 670, 
                'height'        : 385, 
                'titleShow'     : false, 
                'type'          : 'iframe'
            });
        });

        $.getScript("/js/init.js",  function() {
            loading.hide().parent().find('#leaderboard').show();
            filter_res_btn.removeClass("disabled_btn").removeAttr('disabled');
            $('.ui-selectmenu').removeClass("disabled_btn").removeAttr('disabled');
        });

    });

Although the fancybox code is now inside the $.getScript(), it wasn't there before, I just tried that before posting this. All i get now when I click the links is an error saying:

t is undefined (19 out of range 4)

Please let me know if you have any suggestions.

Is `div#leaderboard` the container where you are loading the data? like ` — JFK, Mar 02 '12 at 17:39
@JFK, Yeah it is, I'm loading the data that is a table so it looks like

asdsad — Drew Bartlett, Mar 02 '12 at 18:25

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

Fancybox 1.3.4 doesn't support dynamically added elements, however you could use jQuery (v1.7.x) API .on() method to bind those new elements to fancybox. Check this post for "how to".

edited May 23 '17 at 12:12

Community

1
1

answered Mar 02 '12 at 18:05

JFK

40,963
31
133
306

That did it for me! Thanks so much! This has been so aggravating! – Drew Bartlett Mar 02 '12 at 18:35

Apply jquery fancybox to elements loaded via ajax

1 Answers1

Linked