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

Question

    $("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）。

之前：

之后：

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

<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');
});

更新：

好吧，我是个白痴，但出于某种原因，这并没有引起我的注意。发生的事情是#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;
    });

Answer 1

我建议你设置一个输入类型提交并点击，然后你可以执行你的代码。

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

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

它会很好用！

Answer 2

试试这个，

$(document).ready(function(){
    $("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");
    });
});