Javascript 使用smoothstate.js时，提交表单会触发smoothstate

我的网站在每个页面上都使用smoothstate.js。在几个页面上，我有一个带有表单的模式框弹出。那些表格很好用

在另一个页面上，我有一个包含在html中的基本表单。当我点击表单上的submit按钮时，表单实际上会提交，但smoothstate会启动，从而淡出内容并启动加载屏幕

我希望这不会发生。以下是我的smoothstate函数：

$(function(){
    'use strict';
    var $page = $('#main'),
    options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        allowFormCaching: false,
        forms: 'form',
        blacklist: 'input[type="submit"], .animsition-loading, .hs-button',
        onStart: {
            duration: 1050, // Duration of our animation
            render: function ($container) {
                $('.animsition-loading').show();
                $container.addClass( 'slide-out' );
                smoothState.restartCSSAnimations();
            }
        },
        onReady: {
            duration: 0,
            render: function ($container, $newContent) {
                $container.html($newContent);
                sitejs();
                $(document).ready();
                $(window).trigger('load');
            }
        },
        onAfter: function( $container ) {
            $('.animsition-loading').hide();
            $container.removeClass( 'slide-out' );
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});

---

我有同样的问题，为我的通讯形式。这是你问题的解决办法。您必须将JS中的黑名单类（例如“no smoothsate”）添加到表单标记中。它工作得很好

<form class="no-smoothState">
...
</form>

...

---

我找到了解决办法

我在一份时事通讯表单上也遇到了同样的问题。这是你问题的解决办法。您必须将JS中的黑名单类（例如“no smoothsate”）添加到表单标记中。它工作得很好

<form class="no-smoothState">
...
</form>

...

---

我发现这个解决方案

我认为默认情况下，smoothstate设计用于表单和链接，因此cf7已经可以与AJAX一起使用，您只需将其列入黑名单即可

对于cf7，代码如下：

;(function($) {
'use strict';

    var $body = $('html, body'),
    content = $('#main').smoothState({  
        blacklist: '.wpcf7-form',
        // Runs when a link has been activated
        onStart: {
            duration: 500, // 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) {
                // Scroll user to the top, this is very important, transition may not work without this
                $body.scrollTop(0);

                // Remove your CSS animation reversing class
                $container.removeClass('is-exiting');

                // Inject the new content
                $container.html($newContent);

                // Trigger load functions
                $(document).ready();
                $(window).trigger('load');
            }
        },
        onAfter: function($container) {
            initContactForm();
        }
    }).data('smoothState');
})(jQuery);

---

我相信，默认情况下，smoothstate设计用于表单和链接，因此，由于cf7已经可以与AJAX一起使用，您只需将其列入黑名单即可

对于cf7，代码如下：

;(function($) {
'use strict';

    var $body = $('html, body'),
    content = $('#main').smoothState({  
        blacklist: '.wpcf7-form',
        // Runs when a link has been activated
        onStart: {
            duration: 500, // 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) {
                // Scroll user to the top, this is very important, transition may not work without this
                $body.scrollTop(0);

                // Remove your CSS animation reversing class
                $container.removeClass('is-exiting');

                // Inject the new content
                $container.html($newContent);

                // Trigger load functions
                $(document).ready();
                $(window).trigger('load');
            }
        },
        onAfter: function($container) {
            initContactForm();
        }
    }).data('smoothState');
})(jQuery);