【问题标题】: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);
});
});