Featherlight.js 和 Contact Form 7 之间有冲突吗？

Question

我正在尝试让 Contact Form 7 表单在 Featherlight.js 灯箱中工作。我在 mydomain.com/contact 创建了一个页面并将 link 设置为打开 mydomain.com/contact #main article。

Featherlight 确实打开了表单，但是当我提交表单时，灯箱关闭并且 url 解析为 mydomain.com/contact/#wpcf7-f262-p11-o1。不管是提交成功还是验证错误，灯箱仍然关闭（需要说明的是，表单确实有效——我收到了邮件）。

如果我打开整个页面 (mydomain.com/contact/)，灯箱不会在提交时关闭，这让我相信可能存在 AJAX 冲突。

也就是说，我在控制台中没有收到任何错误。

如能帮助解决问题，我们将不胜感激！

谢谢。

Answer 1

感谢已接受答案的第二部分 here（来自 jQuery 网站的文档示例），我已经开始工作了。

jQuery 的 submit() 函数对我不起作用——我猜这是版本问题？无论如何，这是我的最终代码：

   /* attach a submit handler to the form */
   $( "body" ).on( "submit", ".wpcf7-form", function(event) {

        /* stop form from submitting normally */
        event.preventDefault();

        /* get some values from elements on the page: */
        var $form = $( this ),
          url = $form.attr( 'action' );

        /* Send the data using post */
        var posting = $.post( url, $form.serialize() );

        /* Put the results in a div */
        posting.done(function(data) {
            var content = $(data).find('.wpcf7-form');
            $('.featherlight .wpcf7').empty().append(content);
        });
    });

Featherlight.js 和 Contact Form 7 之间有冲突吗？

Conflict between Featherlight.js and Contact Form 7?

contact-form-7

featherlight.js