jQuery FancyBox 加载后调用函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13826584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 12:59:20  来源:igfitidea点击:

Call function after FancyBox loaded

jquerycallbackjquery-validatefancybox

提问by Jazzy

I am trying to get FancyBox to load an file which contains a form. I want to use the jQuery Validate plugin to validate, but the form is not being added to the DOM before the callback is made.

我试图让 FancyBox 加载一个包含表单的文件。我想使用 jQuery Validate 插件进行验证,但在进行回调之前未将表单添加到 DOM。

The afterLoad option does open an alert, but it actually opens before the ajax content is loaded.

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

I can add an href in the loaded file that when clicked runs validate(), but interestingly, it only works if I call the form by ID rather than class, as there is another form on the same page with that class.

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

I have the following code:

我有以下代码:

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

回答by Andrew Cheong

Try using the ajaxoption with its completeevent:

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

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

回答by The Unknown Dev

I was in a similar situation where I wanted to do some DOM manipulation after the content loaded, but afterLoaddid not work. I had to use afterShowinstead, which seems to be very similar to onCompletefrom Fancybox v1.3.

我处于类似的情况,我想在内容加载后进行一些 DOM 操作,但afterLoad没有成功。我不得不afterShow改用,这似乎与onCompleteFancybox v1.3非常相似。

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