こんにちは、あきぞらです。
jQueryでAjaxを走らせるボタンが連続クリックを防ぎたいときがあります。
そんなとき、ボタンを非活性して押せなくするような対応をとることがあると思います。
今回は、連続クリックを防止する方法について紹介したいと思います。
ボタンや要素をdisableにする
ボタンや要素を非活性にしたいときは、以下のjQueryのコードで実装できます。
// 非活性化
$('#button').prop('disabled', true);
// 活性化
$('#button').prop('disabled', false);
Ajax処理を始める前に要素を非活性にする
たとえば、Ajax送信を始めるボタンが押され、
ajaxの処理中はボタンを非活性にしたいとき、以下のような実装になります。
jQuery(function($){
$('button').on('click', function(){
$.ajax({
url: //～～～～,
type: 'POST',
datatype: 'json',
timeout: 3000,
beforeSend: function(){
$('#button').prop('disabled', true);
}
}).done(function(data){
console.log('done');
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
console.log(XMLHttpRequest.status);
console.log(textStatus);
console.log(errorThrown.message);
});
});
});
beforeSendの記載を追加してあげることで、
Ajax通信を行う直前の処理を記載することができます。
これで、連打が防止できました！