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并抛出以下错误：

未捕获的TypeError：无法读取属性＆＃39;关闭＆＃39;未定义的

如果我把上面的内容变成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的范围有关但后来我希望第二个不能工作，因为它被包装在另一个函数中

请注意我已尝试尝试关闭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

好的，所以当我试图让小提琴复制错误时，我发现问题是什么：

在表格页面上，我使用的是jQuery数据表插件，因此我包含了需要加载的所有脚本。由于我是ajax将页面加载到模态中，这意味着jQuery在当前页面上第二次加载。这导致了我看到的错误。

删除jquery脚本使fancybox按照我的意愿工作或另一种解决方法（如果你希望目标页面在模态中没有打开时仍然可以工作 - 例如，如果你有其他指向该页面的链接）那么你将拥有使用fancybox iframe而不是fancybox ajax modal

在afterShow点击事件中未定义fancybox

1 个答案: