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
Call function after FancyBox loaded
提问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 ajax
option with its complete
event:
尝试使用该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 afterLoad
did not work. I had to use afterShow
instead, which seems to be very similar to onComplete
from Fancybox v1.3.
我处于类似的情况,我想在内容加载后进行一些 DOM 操作,但afterLoad
没有成功。我不得不afterShow
改用,这似乎与onComplete
Fancybox 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
}
});