使用smoothstate.js提交表单会导致smoothstate触发

Question

我在每个页面都有使用smoothstate.js的网站。在几页上，我有一个弹出表格的模态框。这些表格工作得很好。

在另一个页面上，我有一个包含在html中的基本表单。当我单击表单上的提交按钮时，表单实际提交但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');
});

Answer 1

我有一个简报形式给我同样的问题。这是您的问题的解决方案。您必须将JS中的黑名单类（例如“no-smoothsate”）添加到FORM标记中。它完美地运作。

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

我找到了解决方案here

Answer 2

我相信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);