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

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 响应中。这将重新初始化所有表单