Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
386 views
in Technique[技术] by (71.8m points)

php - Apply jquery fancybox to elements loaded via ajax

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...