有时我可以触发提交按钮两次。并且ajax也被触发两次。
这是我的 html 代码:
<div class="buttons-area">
<input id="step-two" class="btn btn-primary" type="submit" value="Next step »">
</div>
这是我的 ajax:
<script>
$(document).ready( function () {
$('#step-two').on('click', function(e) {
e.preventDefault();
var formData = new FormData();
formData.append('username', $('#username').val());
formData.append('email', $('#email').val());
formData.append('password', $('#password').val());
formData.append('password_confirmation', $('#password_confirmation').val());
$.ajax({
url: 'registration',
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: formData,
beforeSend: function()
{
$(".validation-error-inline").remove();
}
})
.done(function(data) {
if (data.validation_failed == 1)
{
var arr = data.errors;
$.each(arr, function(index, value)
{
if (value.length != 0)
{
$("#"+index).closest(".middle").next(".right")
.append('<span class="text-error validation-error-inline">' + value[0] + '</span>');
}
});
}
})
.fail(function(jqXHR, ajaxOptions, thrownError) {
alert('No response from server');
});
return false;
});
});
</script>
如何在第一次单击后禁用按钮并仅在 ajax 完成时才允许下一次单击？
现在，如果我速度很快并且相同的错误消息显示两次，我可以在行中触发 ajax 两次。
最佳答案
您可以在点击时禁用该按钮
$('#step-two').on('click', function(e) {
e.preventDefault();
$(this).prop('disabled',true); //disable further clicks
…
并在 always() 回调中启用，以便无论请求成功与否，该按钮都会在请求后启用。
$.ajax({
url: 'registration',
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: formData,
beforeSend: function()
{
$(".validation-error-inline").remove();
}
})
.done(function(){
// code
})
.fail(function(){
// code
})
.always(function(data) {
$('#step-two').prop('disabled',false); // re-enable the button once ajax is finished
})
关于javascript - 如何在 jQuery 中单击后禁用按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25012168/