jquery - jQueryで二重送信($.post)を防ぐにはどうすればよいですか

Question

$(document).ready(function(){

    $("#enviar").click(function(e){

        e.preventDefault();

        //prevent run 2 or more times if the user clicks the button multiple times to send

        $.post(url,{data:data1,data2:data2},function(rp){

        });

    });

});

送信ボタンを無効にせずに、ユーザーがボタンを繰り返しクリックした場合に「投稿」を2回送信しないようにします

Answer 1

特別なクラス (例: : submitting) をマーカーとして使用して、リクエストが進行中であることを示します。

$("#enviar").click(function(e){
    e.preventDefault();

    var btn = this;
    // check if already present :   
    if ( $(btn).is('.submitting') ){
        return;
    }
    // add it before request :
    $(btn).addClass('submitting');

    $.post(url,{data:data1,data2:data2},function(rp){

    }).always(function(){
        // remove it after completion or failure :
        $(btn).removeClass('submitting');
    });
});

Answer 2

jQuery の.oneイベントを使用します。

$("#enviar").one("click", function() {
  $.post();
});

ドキュメントから：

要素のイベントにハンドラーをアタッチします。ハンドラは要素ごとに最大 1 回実行されます

または、on/off を使用して追加のチェックを行いたい場合は、次のようにします。

// Set up the initial bind on DOM ready
$("#enviar").on("click", doPost);

function doPost() {
  // Unbind when it is clicked
  $("#enviar").off("click", doPost);
  // Do your post
  $.post(url, {}, function() {
    // You could bind again on success if you want
    $("#enviar").on("click", doPost);
  });
}