允许使用jQuery点击按钮提交

Question

我有一个提交按钮的网页。我的提交按钮，如下所示：

<button type="submit" class="btn btn-primary wait-on-click"> 
    <span>Submit</span> 
</button> 

当用户点击提交按钮，我想禁用的按钮，让用户知道有事情发生。要做到这一点，我有以下JavaScript：

$('.wait-on-click').click(function(e) { 
    e.preventDefault(); 
    $(this).prop('disabled', true); 
    $('span', this).text('Please wait...'); 
}); 

该按钮禁用。文本被更新。但是，提交实际上并未提交给服务器。如果我注释掉我的JavaScript函数的正文，它可以正常工作。我不明白如何解决这个问题。

谢谢！

Answer 1

我相信你的问题是这一行

e.preventDefault(); 

这阻止提交按钮的默认行为，即提交！因此，删除它。

更新

测试后，我发现这个问题。 我相信你的问题是这一行

$(this).prop('disabled', true); 

出于某种原因，这是防止从形式提交。因此，把它放在提交处理程序中。

$('.wait-on-click').click(function(e) { 
 
    $('span', this).text('Please wait...'); 
 
}); 
 

 
$('form').on('submit', function() { 
 
    $('.wait-on-click').prop('disabled', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<form> 
 
    <input name="n" /> 
 
    <button type="submit" class="btn btn-primary wait-on-click"> 
 
    <span>Submit</span> 
 
    </button> 
 
</form>