Question

我试图让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">

Answer 1

尝试将ajax选项与其complete事件一起使用：

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

Answer 2

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.

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

加载FancyBox后调用函数

2 个答案: