AJAX 如果联系表驻留在 AJAX 加载的内容中，提交将不起作用

Question

如果 AJAX 加载的内容包含 CF7 联系表单，则 AJAX 提交将不适用于该表单。

建议的解决方法是将此行放在联系表单模板中：

<script src="/wp-content/plugins/contact-form-7/includes/js/scripts.js"></script>

这将使表单正常工作，但会导致另一个问题：普通的 CF7 联系表单，放置在 AJAX 未加载的页面部分，将在提交时显示多个微调器图标。

可能是因为对于未放置在由 ajax 加载的内容中的表单，多次包含脚本会多次绑定表单代码。

Answer 1

自己找到解决办法。如果您有一个未由 ajax 加载的联系表单和一个由 ajax 加载的联系表单，对于第二个，您需要修改模板添加：

<div id="ajaxform_wrapper">
    <script>
        jQuery('#ajaxform_wrapper > div.wpcf7 > form').wpcf7InitForm();
    </script>
    ... contact form fields...
</div>

基本上我们将表单字段包装到 div #ajaxform_wrapper（随机名称）中，并且我们添加了一行 Javascript 仅绑定 CF7 代码对于该表单，避免对已初始化的表单进行多次绑定。

这会起作用，并且您在提交普通联系表单时不会看到多个微调框。

Answer 2

工作解决方案（调用 ajax 完成）：

var ajaxContainer = $('#somediv_id'),
    newCF7 = $('.wpcf7 > form', ajaxContainer);
    newCF7.attr('action', "#" + newCF7.attr('id'));
    wpcf7.initForm( newCF7 );

AJAX 如果联系表驻留在 AJAX 加载的内容中，提交将不起作用

AJAX submission won't work if Contact Form resides in an AJAX-loaded content

wordpress

contact-form-7