$("form").submit(function() { 在 Firefox 中不起作用

    $("form").submit(function() {
        if ($("#content") != null) {
            $("#content").replaceWith('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>');
        }
        return true;
    });

上面的代码在 Chrome 上运行良好，但在 Firefox 上不起作用。不知道为什么，但在 Firefox 中，表单实际上并未提交。 div 替换有效，但提交时没有任何爱，页面只是保持空闲状态。

这里的目的是捕获任何表单的提交并将旋转器（CSS而不是图像）扔到页面上，直到返回post / put并且旋转器被页面重新加载时的实际内容div擦除（非ajax） 。

Before:

After:

代码已删除（帖子现在出现）：

<form accept-charset="UTF-8" action="/users/sign_in" class="new_user" id="new_user" method="post" role="form">

            <!-- begin row -->
            <div class="row">
                <!-- begin col-12 -->
                <div class="col-lg-6">
                    <div class="form-group"><label class="sr-only control-label" for="user_email">Email</label><input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" placeholder="E-mail" type="email" value="" /></div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group"><label class="sr-only control-label" for="user_password">Password</label><input class="form-control" id="user_password" name="user[password]" placeholder="Password" type="password" /></div>
                </div>
            </div>
            <!-- end row -->
            <!-- begin row -->
            <div class="row">
                <!-- begin col-12 -->
                <div class="col-md-12 center">
                    </br>
                </div>
            </div>
            <!-- end row -->
            <!-- begin row -->
            <div class="row">
                <!-- begin col-12 -->
                <div class="col-md-12 center">
                    <input class="btn" name="commit" type="submit" value="Sign in" />
                    <div class="m-t-20">

<a href="/users/password/new">Forgot your password?</a><br/>

<a href="/users/confirmation/new">Didn&#39;t receive confirmation instructions?</a><br/>

<a href="/users/unlock/new">Didn&#39;t receive unlock instructions?</a><br/>

                    </div>
                </div>
            </div>
            <!-- end row -->

<script>
$(document).ready(function () {
    App.init();

    $("form").submit(function(){
        if ($("#content") != null) {
            $("#content").replaceWith('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>');
        }
        return true;
        alert("Submitted");
    });
});

$(function () {
    var hash = window.location.hash;
    hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

UPDATE:

好吧，我是个白痴，但出于某种原因，我没有想到这一点。发生的情况是 #content div 包含我要替换的表单。所以对我来说很奇怪的是为什么它在 Chrome / IE 中有效而不是在 Firefox 中有效？

如果我使用以下内容，它可以工作，但我会得到一些悬空的表单元素：

$("form").submit(function(){
        if ($("#content") != null) {
            $("#content").append('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>');
        }
        return true;
    });

我建议您设置输入类型提交并单击，然后您可以执行代码。

$("#submit_form_id").on("click",
function(e){
e.preventDefault();

//your specific code
$("#formId").submit();
});

而且效果会很好！