javascript - 单击事件时向服务器发送多个 Ajax 请求

Question

我有一个用户界面，当有人点击一个按钮时，系统会打开一个带有一些消息和一个是或否按钮的引导模型，如果“否”按钮点击了引导程序，那么当点击“是”按钮时，ajax 请求被发送到服务器。

问题是，如果我单击按钮三次然后关闭模式，即在对话框中单击“否”全部三次，那么正如预期的那样，没有发送 ajax 请求但是当我第四次单击按钮并在模式上单击“是”时总共有 4 个请求同时发送到服务器，即它以某种方式记住最后 3 个点击事件。我怎样才能简化这个？

这是代码。

$('.js--acc-display').on('click','.js--verify', function () {
    var mode = $(this).data('mode');
    $conformDialogue.find('.modal-body').text('Custom Message');
    $conformDialogue.modal('show').on('click', '#js--conform-ok', function(e) {                
       $conformDialogue.modal('hide')
             //// Ajax Request Code Here /////
    });
});

标签： javascriptjqueryajaxmodal-dialogbootstrap-modal

Answer 1

这是一个常见的陷阱，一个简单的解决方案可能只是在请求时隐藏按钮。或者您使用适用于大多数浏览器的属性“禁用”

$conformDialogue.modal('show').on('click', '#js--conform-ok', function(e) {  
   /* on click disable the button */              
   $('#js--conform-ok').attr('disabled', true);
   $conformDialogue.modal('hide');

         //// Ajax Request Code Here /////

        /* on ajax-end enable again  */
        $('#js--conform-ok').attr('disabled', false);
});