jQuery .on（ 'クリック'）重複するajaxコール

Question

私のアプリで重複するajax呼び出しに問題があります。ここで は私のjQueryのコードです：

$(document.body).on('click', 'a.sample', function(event) { 
    event.preventDefault(); 

    $('#UniqueFormId').submit(function(event) { 
     event.preventDefault(); 

     // HERE IS AJAX CALL // 

     return false; 
    }); 
}); 

問題私は#UniqueFormIdフォームを送信せずにa.sampleボタンを数回クリックしたときに表示されます。次に、フォームを送信してボタンをクリックすると、重複するajax呼び出しが作成されます。

私はを使用します。なぜなら、私はajax呼び出しの後にglobalyを使用しないからです。 どのようにしてAjaxコールが重複するのを避けることができますか？

Answer 1

その後、AJAXリクエストのsuccess/errorコールバックした後、それを有効にクリックイベントの後にボタンを無効にできます。

$('#UniqueFormId').submit(function(event) { 
     event.preventDefault(); 

     var _this = $(this); 
     _this.attr('disabled', 'disabled'); //disable the button 

     // IN AJAX CALLBACK 
     _this.removeAttr('disabled'); //enable the button again 

     return false; 
}); 

$(document.body).on('click', 'a.sample', function(event) { 
    event.preventDefault(); 

    //Load your Modal here 
}); 

・ホープ、このことができます。

Answer 2

ちょうどあなたが12リファクタリングにもクリックの外に設定することが提出するハンドラを任意のDOMの相互作用に依存しない、単純なフラグを使用し、することができますsubmit()とclick()機能

$('#UniqueFormId').submit(function(event) { 
    event.preventDefault(); 

     // HERE IS AJAX CALL // 

     return false; 
    }); 

$(document.body).on('click', 'a.sample', function(event) { 
    event.preventDefault(); 
    $('#UniqueFormId').submit(); 
}); 

Answer 3

を分離イベント。あなたはちょうどajaxサブミットを発生させるためにクリックイベントを発生させ、ハンドラを設定しないでください。

この場合、is_sendingは、trueに設定されていると送信機能を強制的にオフにします。これはbeforeSendコールバックに設定されており、completeコールバックでクリアされていることがわかります（成功とエラーの両方で呼び出されるので、いつでも再試行が可能です）。

希望理にかなっている！このパターンは、この特定のフォームのために、いつでもただ1つのajaxリクエストがアクティブであることを保証する必要があります。

var is_sending = false; // Default to false, then set to true when ajax request starts... 

$(document.body).on('click', 'a.sample', function(event) { 
    event.preventDefault(); 
    $('#UniqueFormId').submit(); 
}); 

$('#UniqueFormId').submit(function(event) { 
    event.preventDefault(); 
    if (is_sending) return false; 
    $.ajax({ 
     ... 
     beforeSend: function() { 
     is_sending = true; 
     }, 
     complete: function() { 
     is_sending = false; 
     }, 
     success: function (response) { 
     // Do whatever... 
     } 
    }); 
}); 

Answer 4

すべてに対して.On書き込むと、吹き出しや重複バインディングを防ぐためにバインディングが削除されます。