jQuery的：隱藏/顯示按鈕和DIV上提交

Question

當我提交我的形式我想提交按鈕隱藏，然後用一個消息，一個div出現。似乎很基本，但它不起作用;提交按鈕不會消失，並且消息div不會出現。

有什麼阻止這種情況的發生，直到表單提交的文件或DOM嗎？或者我只是俯視一些非常簡單的事情？

<input class="btn btn-primary" id="submit" type="submit" value="Submit"> 

<div id="spin"></div> 

<script> 

$('#submit').click(function(e) { 

    // hide the submit button 
    $('#submit').hide(); 

    // replace the submit button with a "message" button" 
    $('#spin').html('<button class="btn btn-success"><i class="fa fa-refresh fa-spin"></i>&nbsp; Saving...</button>'); 

}); 

</script> 

Answer 1

其工作正常，請檢查您添加jQuery庫或不

看到Demo fiddle

使用this是一個很好的做法，當在同一事件的身體一樣選擇使用。

$('#submit').click(function(e) { 
    // hide the submit button 
    $(this).hide(); 
    // replace the submit button with a "message" button" 
    $('#spin').html('<button class="btn btn-success"><i class="fa fa-refresh fa-spin"></i>&nbsp; Saving...</button>'); 
}); 

Answer 2

你的代碼工作正常，只是檢查你的jQuery庫它增加以及

$('#submit').click(function(e) { 
 

 
    // hide the submit button 
 
    $('#submit').hide(); 
 

 
    // replace the submit button with a "message" button" 
 
    $('#spin').html('<button class="btn btn-success"><i class="fa fa-refresh fa-spin"></i>&nbsp; Saving...</button>'); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="btn btn-primary" id="submit" type="submit" value="Submit"> 
 

 
<div id="spin"></div>

Answer 3

感謝您的答覆，夥計們。我想清楚發生了什麼事情：我需要中斷提交表單 - 顯示/隱藏這些內容 - 然後繼續提交表單。

對於其他人誰可能過這個問題絆倒，這並獲得成功：

$('#form-post').unbind('submit').submit(); 

完整的示例

<form id="form-post"> 

    <input id="submit" type="submit" value="Submit"> 

    <div id="spin"></div> 

</form> 


<script> 

$('#submit').click(function(e) { 

    $(this).hide(); 

    $('#spin').html('<button class="btn btn-success"><i class="fa fa-refresh fa-spin"></i>Saving...</button>'); 

    $('#form-post').unbind('submit').submit(); 
}); 

</script> 

*改變$('#submit')到$(this)由Frayne Konok的建議。