Jquery - Ajax：使用 ajax 按钮“on Click 方法”未处理的多次点击事件

Question

我有一个按钮，用于向远程 Web 服务注入 ajax 请求。

在检查另一个 ajax 请求成功给出的条件后，该特征生效（这就是我使用“ajaxSuccess”的原因）

我的功能看起来像这样：

$('body').on('click', '#btn', function (e) {
$(document).ajaxSuccess(function (event, xhr, settings) {

   if (settings.url === window.annonce.route.testService) {
              xhr = xhr.responseJSON;
              var msg = {},
                    if (xhr == 1) {   //case of traitement to be done
                    msg["attr1"] = attr1;
                    msg["attr2"] = attr2;
                    msg = JSON.stringify(msg);
                    console.log(msg);

                    $.ajax({
                    method: 'POST',
                    url: servicePostulation,
                    data: {msg: msg},
                    dataType: 'json',
                    success: function (data) {
                       console.log(data);
                       $("#btn").addClass("active");
                    },
                    error: function (data) {
                           console.log(data);
                    }
                 });
               }
           }
       })

}

我的情况是， “console.log(msg)”向我显示了多次发送数据 msg ，这意味着多次点击事件，这正是我想要回避的问题，

我已经尝试了许多使用“ $('body').on('click') 的解决方案，例如：

1. e.stopImmediatePropagation(); e.preventDefault();
2. 停止传播()
3. 一个()
4. 关闭（）
5. 解除绑定（）

但没有任何作用，那么有没有进一步的解决方案或解释？

Answer 1

我的建议是在用户单击时禁用该按钮，然后在 ajax 完成时启用该按钮。

**点击：**

$('#btn').prop("disabled", true);

Ajax 完成/成功：

$('#btn').prop("disabled", false);