javascript - Jquery-Ajax : Unhandled multiple clicks event with ajax button "on Click method"

Question

我有一个按钮，可以将 ajax 请求注入(inject)到远程 Web 服务。

该特征在检查另一个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)”向我显示了多次发送数据消息，这意味着多次点击事件，和这正是我想避免的问题，

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

1. e.stopImmediatePropagation(); e.preventDefault();
2. stopPropagation()
3. 一()
4. 关闭()
5. 解除绑定(bind)()

但是没有任何效果，那么有没有进一步的解决方案或解释？

Answer 1

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

**点击时:**

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

Ajax 完成/成功:

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