通过 AJAX (smoothstate.js) 加载页面时，Contact Form 7 抛出 'wpcf7.initForm is not a function' 错误

Question

我正在尝试使用 smoothstate.js 在我的 wordpress 网站上实施 Contact Form 7。当直接加载使用它的页面时，联系表单可以完美运行。但是，如果通过 AJAX 加载页面，则会出现错误 'wpcf7.initForm is not a function'。

我不是 AJAX 的天才，但我的想法是在 AJAX onAfter 函数中重新初始化。我尝试使用 wpcf7InitForm();但仍然没有运气。

非常感谢有关此主题的任何帮助！

这是我当前的 AJAX 代码：

  //SmoothState Page Transitions

  $(function(){
    'use strict';
    var $page = $('#main'),
        options = {
          debug: true,
          prefetch: true,
          onStart: {
            duration:  800, // Duration of our animation
            render: function ($container) {
              // Add your CSS animation reversing class

              $container.addClass('is-exiting');

              // Restart your animation
              smoothState.restartCSSAnimations();
            }
          },
          onReady: {
                duration: 0,
                render: function($container, $newContent) {
                    // Remove your CSS animation reversing class
                    $container.addClass('is-loaded');

                    setTimeout(function(){
                      $container.addClass('unload');
                    }, 600);

                    setTimeout(function(){
                      $container.removeClass('is-loaded unload');
                    }, 900);


                    // Inject the new content
                    $container.html($newContent);
                }
            },
            onAfter: function($container) {
              $container.removeClass('is-exiting');
               $('div.wpcf7 > form').wpcf7InitForm();
               $(window).data('plugin_stellar').refresh();
            }
        },
        smoothState = $("#main").smoothState(options).data("smoothState");
      });

Answer 1

v4.8 中的 Contact Form 7 发生了变化，删除了 jquery.form.js，因此 wpcf7InitForm() 函数不再有效。但是，在 v4.8.1

中带回了一个新的 init 函数

wpcf7.initForm

改为使用此函数：

function initContactForm() {
 $( 'div.wpcf7 > form' ).each( function() {
  var $form = $( this );
  wpcf7.initForm( $form );
  if ( wpcf7.cached ) {
   wpcf7.refill( $form );
  }
 });
}

在onAfter中调用它应该可以解决你的问题。

以下是 Contact Form 7 支持论坛上的讨论： https://wordpress.org/support/topic/init-function-wpcf7initform/

通过 AJAX (smoothstate.js) 加载页面时，Contact Form 7 抛出 'wpcf7.initForm is not a function' 错误

Contact Form 7 throws 'wpcf7.initForm is not a function' error when loading page through AJAX (smoothstate.js)

ajax

wordpress

jquery

contact-form-7

smoothstate.js