$（“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（non ajax）消除。

之前：

后：代码中删除

（后现在看来）：

<form accept-charset="UTF-8" action="https://stackoverflow.com/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="https://stackoverflow.com/users/password/new">Forgot your password?</a><br/> 

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

<a href="https://stackoverflow.com/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; 
    }); 

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