用户提交弹出窗体时发送多个ajax调用

Question

在我的应用程序中，有一个jQuery弹出窗口，我在其中列出供应商以及每个供应商前面的复选框。然后，用户可以选中每个供应商的一个复选框，然后按删除按钮删除供应商。但是，一旦用户单击删除按钮，ajax调用将正确发送到服务器端并在服务器端正确删除供应商（已删除的供应商不再显示在列表中）。一旦用户再次执行相同操作，我注意到弹出窗口向服务器端发送两个ajax请求。如果用户第三次点击，弹出窗口会发送三次ajax请求，依此类推。

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 ){})

每次按钮上都有一个新的监听器，这是累积的。

尝试使用“one”：

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

来自jquery文档：

“.one（）方法与.on（）完​​全相同，除了给定元素和事件类型的处理程序在第一次调用后未绑定。”