【问题标题】:Conflict between Featherlight.js and Contact Form 7?Featherlight.js 和 Contact Form 7 之间的冲突?
【发布时间】:2015-10-30 20:06:33
【问题描述】:

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

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

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

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

如有任何帮助解决问题,我们将不胜感激!

谢谢。

【问题讨论】:

    标签: contact-form-7 featherlight.js


    【解决方案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);
            });
        });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-03-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-06-27
      相关资源
      最近更新 更多