afterShow 点击事件中未定义的 fancybox

Question

我在页面加载时调用了以下代码：

$('#postcodes-link').fancybox({
    type: 'ajax',
    minWidth: 800,
    minHeight: 400,
    afterShow: function () {
        $('table.data-table > tbody > tr').on('click', function () {
            $.fancybox.close();
        });
    }
});

现在可以正常打开 fancybox (fiddle example)，但是当我单击该行时，它不会关闭 fancybox，只会抛出以下错误：

Uncaught TypeError: Cannot read property 'close' of undefined

然而，如果我将上面的内容变成 jQuery 函数：

(function ($) {
    $.fn.setUp = function () {
        return $(this).each(function () {
            $(this).fancybox({
                type: 'ajax',
                minWidth: 800,
                minHeight: 400,
                afterShow: function () {
                    $('table.data-table > tbody > tr').on('click', function () {
                        $.fancybox.close();
                    });
                }
            });
        });
    };
})(jQuery);

并在我调用顶部代码的相同位置调用以下代码

$('#postcodes-link').setUp();

fancybox 现在将关闭 (fiddle example)。我的问题是为什么第一个不起作用而第二个起作用，我怎样才能使第一个起作用？我认为这与 fancybox 的范围有关，但我希望第二个不能工作，因为它包含在另一个函数中

请注意，我已经尝试了各种尝试关闭花式框的版本：

$.fn.fancybox.close()
jQuery.fancybox.close()
parent.$.fn.fancybox.close()
$('.fancybox-close').trigger('click') //tried this one as a dirty hack but didn't work either

Answer 1

好的，所以我在尝试让 fiddle 复制错误时发现了问题所在：

在 table 页面上，我使用了 jQuery data-table 插件，因此我包含了加载它所需的所有脚本。当我 ajax 将页面加载到模式中时，这意味着 jQuery 正在当前页面上第二次加载。这导致了我看到的错误。

删除 jquery 脚本使 fancybox 按照我的意愿或其他解决方法工作（如果您希望目标页面在未以模式打开时仍然工作 - 例如，如果您有其他链接到该页面page) 那么你将不得不使用 fancybox iframe 而不是 fancybox ajax modal

afterShow 点击事件中未定义的 fancybox

fancybox undefined in afterShow click event

javascript

jquery

fancybox-2