Question

我已经尝试过搜索，但这只会返回有关AJAX如何加载页面/表单的结果。我正在做的是通过AJAX（联系表格7）加载表单，我想知道如何在该表单上重新启用AJAX提交。这是CF7的可能性吗？

Answer 1

Contact Form 7调用init函数，该函数在页面加载时执行。如果您的表单是使用AJAX加载的，则应确保在加载表单后调用该函数。

查看：

plugins/contact-form-7/includes/js/scripts.js

用于定义函数wpcf7InitForm。

修改调用此函数每次都会插入一个新的加载徽标。不幸的是，我找不到比使用jQuery从DOM中删除重复加载器更好的解决方案：

function initContactForm() { jQuery('div.wpcf7 > form').wpcf7InitForm(); jQuery('form.wpcf7-form') .each(function() { $j(this).find('img.ajax-loader').last().remove(); }); }

Answer 2

此行为随wpcf7的4.8版本而更改。从那以后，电话会是

wpcf7.initForm( jQuery('.wpcf7-form') );

虽然它不再需要jQuery，你也可以传递一个节点.. 像这样（有多种形式......）

var wpcf7_form = document.getElementsByClassName('wpcf7-form');
[].forEach.call(wpcf7_form, function( form ) {
  wpcf7.initForm( form );
});

它仍然是用jQuery编写的，但它不必在你的函数中处于活动状态（即jQuery.ready（））来运行。加上它摆脱了jQuery.form

Answer 3

5.4 或以上版本使用以下代码：

document.querySelectorAll(".wpcf7 > form").forEach((
                function(e){
                    return wpcf7.init(e)
                }
            )
        );

把这个放在你的 ajax 响应中。这将重新初始化所有表单

Answer 4

我花了最后三个小时寻找解决方案，我只找到问题而没有回答，但我想我找到了一个解决方案，希望这会帮助你和其他人解决这个问题。

在我的情况下，我试图在一个带有PrettyPhoto的内联灯箱中嵌入一个CF7表格（但我认为这与其他像Fancybox一样）。我的问题是这些内联灯箱通过AJAX在灯箱内生成内容，并且在该内容之前加载了CF7脚本，因此表单的AJAX提交无效。

我所做的是在打开prettyphoto灯箱时触发的事件中通过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");

确保您的路径和版本相同，否则请更改它们。

这将刷新表单并重新启用AJAX提交。

希望它有所帮助！

Answer 5

无法通过带有以上注释的ajax发送表单。我必须使用wpcf7.submit方法与wpcf7.init

用法示例：

wpcf7.submit(document.querySelector('.wpcf7-form'));

在AJAX加载后在Contact Form 7表单上启用AJAX

5 个答案: