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.

Answer 1

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”.