jQuery 加载 AJAX 后在联系表单 7 表单上启用 AJAX
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28866152/
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
Enabling AJAX on Contact Form 7 Form after AJAX Load
提问by PavKR
I've tried searching but this only returns results on how to AJAX load a page/form. What I am doing is loading a form via AJAX (Contact Form 7) and I would like to know how to re-enable AJAX submission on that form. Is this a possibility with CF7?
我试过搜索，但这只会返回有关如何 AJAX 加载页面/表单的结果。我正在做的是通过 AJAX（联系表单 7）加载表单，我想知道如何在该表单上重新启用 AJAX 提交。这是CF7的可能性吗？
回答by Anuj Kumar
Contact Form 7 calls an init function, which executes on page load. If your form is loading using AJAX, you should make sure that the function gets called after your form is loaded.
Contact Form 7 调用 init 函数，该函数在页面加载时执行。如果您的表单使用 AJAX 加载，您应该确保在您的表单加载后调用该函数。
Look into:
调查：
plugins/contact-form-7/includes/js/scripts.js
plugins/contact-form-7/includes/js/scripts.js
for the definition of the function wpcf7InitForm.
对于函数的定义wpcf7InitForm。
Edit:Calling this function inserts a new loading logo each time. Unfortunately, I couldn't find a better solution than deleting the duplicate loader from DOM using jQuery:
编辑：每次调用此函数都会插入一个新的加载徽标。不幸的是，我找不到比使用 jQuery 从 DOM 中删除重复加载器更好的解决方案：
function initContactForm() {
jQuery('div.wpcf7 > form').wpcf7InitForm();
jQuery('form.wpcf7-form')
.each(function() {
$j(this).find('img.ajax-loader').last().remove();
});
}
回答by honk31
this behavior changed with version 4.8 of wpcf7. since then the call would be
这种行为随着 wpcf7 的 4.8 版而改变。从那时起，电话将是
wpcf7.initForm( jQuery('.wpcf7-form') );
while it does not require jQuery anymore, you could also pass a node.. somehting like this (capable of multiple forms..)
虽然它不再需要 jQuery，但你也可以传递一个节点..像这样的东西（能够有多种形式......）
var wpcf7_form = document.getElementsByClassName('wpcf7-form');
[].forEach.call(wpcf7_form, function( form ) {
wpcf7.initForm( form );
});
it is still written in jQuery, but it does not have to be active (i.e. jQuery.ready()) in your function to operate. plus it got rid of jQuery.form
它仍然是用 jQuery 编写的，但它不必在您的函数中处于活动状态（即 jQuery.ready()）才能运行。加上它摆脱了 jQuery.form
回答by YiZhAi
I spent the last three hours looking for a solution to this and I only have found questions without answer, but I think I found a solution and hope this will help you and other people with this problem.
我花了最后三个小时寻找解决方案，我只找到了没有答案的问题，但我想我找到了一个解决方案，希望这能帮助你和其他人解决这个问题。
In my case, i was trying to embed a CF7 form in an inline lightbox with PrettyPhoto (but I think this is the same with others like Fancybox). My problem was that these inline lightboxes works generating the content inside the lightbox via AJAX, and the CF7 scripts were loaded before that content, so the AJAX submit of the form wasn't work.
就我而言，我试图将 CF7 表单嵌入到带有 PrettyPhoto 的内嵌灯箱中（但我认为这与 Fancybox 等其他表单相同）。我的问题是这些内联灯箱通过 AJAX 生成灯箱内的内容，并且 CF7 脚本在该内容之前加载，因此表单的 AJAX 提交不起作用。
What I did was getting the CF7 scripts via jQuery.get on the event triggered when a prettyphoto lightbox is opened. In your case, I think you should do this just after generating the content via AJAX, something like:
我所做的是通过 jQuery.get 在打开漂亮照片灯箱时触发的事件上获取 CF7 脚本。在您的情况下，我认为您应该在通过 AJAX 生成内容后执行此操作，例如：
jQuery.get("/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20");
jQuery.get("/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.1.1");
Make sure that your paths and versions are the same, otherwise change them.
确保您的路径和版本相同，否则更改它们。
This will refresh the form and re-enable the AJAX submit.
这将刷新表单并重新启用 AJAX 提交。
Hope it helps!
希望能帮助到你！
