将 jquery fancybox 应用于通过 ajax 加载的元素答案

【问题标题】：Apply jquery fancybox to elements loaded via ajax将 jquery fancybox 应用于通过 ajax 加载的元素
【发布时间】：2012-03-02 15:52:21
【问题描述】：

我正在加载一堆数据并将其添加到一个 div 中。但是，数据中的一些项目是需要与fancybox 一起使用的链接。我正在使用fancybox 1.3.4。我尝试了一些解决方案，例如 $fancybox.init();和 $(document).ajaxStop();没有一个工作。以下是我的代码：

$.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');
        });

    });

虽然fancybox 代码现在在$.getScript() 中，但以前不存在，我只是在发布之前尝试过。当我点击链接时，我现在得到的只是一个错误提示：

t 未定义（19 超出范围 4）

如果您有任何建议，请告诉我。

【问题讨论】：

div#leaderboard 是您加载数据的容器吗？喜欢<div id="leaderboard"><a class="video" ....?
@JFK，是的，我正在加载表格的数据，所以它看起来像

asdsad

标签： php jquery ajax jquery-ui fancybox

【解决方案1】：

Fancybox 1.3.4 不支持动态添加的元素，但是您可以使用 jQuery (v1.7.x) API .on() 方法将这些新元素绑定到 fancybox。 Check this post for "how to".

【讨论】：

为我做到了！非常感谢！这真是太严重了！