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