ユーザーがポップアップフォームを送信すると、複数のajaxコールが送信されます

Question

私のアプリケーションでは、各サプライヤの前にあるチェックボックスと一緒にサプライヤを一覧表示するjQueryポップアップウィンドウがあります。ユーザーは各サプライヤのチェックボックスの1つをチェックし、削除ボタンを押すとサプライヤを削除することができます。ただし、ユーザーが削除ボタンをクリックすると、Ajaxコールはサーバー側に正しく送信され、サーバー側で適切にサプライヤーを削除します（削除されたサプライヤーはリストに表示されなくなります）。ユーザーが同じことをやり直すと、ポップアップウィンドウが2つのajaxリクエストをサーバー側に送信することに気付きました。ユーザが3回目にクリックすると、ポップアップウィンドウはajaxリクエストを3回送信します。

var ajaxURL = getFormAction('crm.web.SupplierManager', 
'deleteSupplierRequestAjax'); 
$("#deleteBtnId").click(function(event) { 
    $("#supplierDeleteConfirmDivId").dialog("open"); 
    $("#supplierPopupCancelBtnId").click(function(event) { 
    $("#supplierDeleteConfirmDivId").dialog("close"); 
    event.preventDefault(); 
}); 
$("#supplierPopupOkBtnId").click(function(event) { 
    $("#supplierDeleteConfirmDivId").dialog("close"); 
     $("#supplierPopupOkBtnId").mask("Waiting..."); 
     $.ajax({ 
      type: 'POST', 
      data: $("#formId").serialize(), 
      url: ajaxURL, 
      success: function (data) { 
       $("#supplierPopupOkBtnId").html(data); 
       $("#supplierPopupOkBtnId").unmask(); 
      }, 
      error: function(jQXHR, textStatus, errorThrown) { 
       $("#supplierPopupOkBtnId").unmask(); 
       handleAjaxError(jQXHR, textStatus, errorThrown); 
      } 
     }); 
    }); 
event.preventDefault(); 
}); 

私にとって、ユーザーが削除ボタンをクリックするたびに、ポップアップウィンドウにレンダリングが蓄積されているようです。本当の理由はわかりません。私は$("#formId").serialize()が問題を起こしていると推測しています。誰もが別の考えがありますか？で

Answer 1

：あなたはたびにボタンの新しいリスナーを作成している

$("#supplierPopupCancelBtnId").click(function(event){}) 

が、これは累積的です。

"1" としてみてください：

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

jQueryのドキュメントから：

「.one（）メソッドは、指定された要素およびイベントのハンドラことを除いて、）（.onと同じですタイプは、最初の呼び出しの後にバインドされていません。