用户提交弹出表单时发送多个ajax调用答案

【问题标题】：Multiple ajax call send when user submit popup form用户提交弹出表单时发送多个ajax调用
【发布时间】：2017-12-19 13:04:07
【问题描述】：

在我的应用程序中，有一个 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() 麻烦了。谁有不同的想法？

【问题讨论】：

可以尝试使用 async: false,
不要使用async: false，它已被弃用。如果您需要异步代码，请参阅Promises。
谢谢@Zenoo 知道这是怎么回事吗？

标签： javascript jquery ajax popup

【解决方案1】：

与：

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

你每次在按钮上创建一个新的监听器，这是累积的。

尝试使用“一个”：

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

来自 jquery 文档：

“.one() 方法与 .on() 相同，只是给定元素和事件类型的处理程序在第一次调用后是未绑定的。”

【讨论】：

采纳了您的建议。是的，你是对的。它工作正常。谢谢..!!!