FancyBox 加载后调用函数答案

【问题标题】：Call function after FancyBox loadedFancyBox 加载后调用函数
【发布时间】：2012-12-11 18:51:24
【问题描述】：

我正在尝试让 FancyBox 加载包含表单的文件。我想使用 jQuery Validate 插件进行验证，但是在进行回调之前表单没有被添加到 DOM 中。

afterLoad 选项确实会打开警报，但它实际上是在加载 ajax 内容之前打开的。

我可以在加载的文件中添加一个 href，单击该文件会运行 validate()，但有趣的是，它仅在我按 ID 而不是类调用表单时才有效，因为在同一页面上还有另一个表单与该类。

我有以下代码：

<a href="/url" class="fancy fancybox.ajax">link</a></li> 



$(".fancy").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    afterLoad: function() {
      //$(".validateMe").validate();
      alert(987987);
    }
});


<form id="someId" action="javascript:someFunction();" class="validateMe" method="post">

【问题讨论】：

标签： jquery callback jquery-validate fancybox

【解决方案1】：

尝试使用 ajax 选项及其 complete 事件：

$(".fancy").fancybox({
    // ...
    ajax: {
        complete: function(jqXHR, textStatus) {
            $(".validateMe").validate();
        }
    }
});

【讨论】：

谢谢，我在他们的文档中没有看到该选项。它起作用了，我取出了参数，一切都很好。
@Jason ：您没有看到它，因为它是一个 jQuery 方法，而不是一个花哨的 API 选项。此外，您可以改用afterShow。
@JFK - 实际上，它是一个花哨的 API 选项，尽管只是将参数转发到相应的 jQuery 方法。它记录在他们的主页上，fancyapps.com/fancybox。
你是对的，我的错。即使我多次使用它（+1），也完全错过了它。

【解决方案2】：

我遇到过类似的情况，我想在内容加载后进行一些 DOM 操作，但 afterLoad 没有用。我不得不改用 afterShow，这似乎与 Fancybox v1.3 中的 onComplete 非常相似。

$.fancybox({
            href: '/some/link/here',
            type: 'ajax',
            // Other options like size go here
            afterShow: function() {
                // Code to execute after the pop up shows
            }
        });

【讨论】：