如何防止用户双击按钮打开两个相同的 Bootstrap 对话框？

Question

如果 ajax 需要一段时间来加载对话框并且用户双击按钮，屏幕上会弹出两个相同的对话框。我想阻止它发生。

$("#ShowUpCallTag").on('click', function (e) {
        $.ajax({
            url: '/Ship/CallTags/Dialog/' + $(e.target).data('calltagid'),
            type: 'get',
            datatype: 'json'
        }).done(function (data) {
            var dialog = main.ship.calltags.dialog.buildDialog(data);
            dialog.open();
        });
    });

Answer 1

我认为您代码中的问题在于您不知道对话框是否打开。我会做什么：

1. 在与您的 jQuery 调用相同的范围内创建一个变量，例如：var dialogOpened = false
2. 在您的点击处理函数中，仅当 dialogOpened === false
时才执行 ajax 调用
3. 在您的 done(function (data) {}) 回调中，将 dialogOpened 设置为 true 并侦听 Bootstrap 生成的事件以了解模式何时被用户关闭（参见 Bootstrap Modal Events）
4. 当模式关闭时，设置回dialogOpened为false。
5. 我认为也是一个好的做法：如果您绑定点击的元素是一个按钮，您可以在用户点击它后立即禁用它。

Answer 2

           var isModelDialogOpen = false;
           $("#ShowUpCallTag").on('click', function (e) {
             if (isModelDialogOpen == false) {
                isModelDialogOpen = true;

                //Popup call tag dialog.
                $.ajax({
                  url: '/Ship/CallTags/Dialog/' + $(e.target).data('calltagid'),
                  type: 'get',
                  datatype: 'json'
                    .done(function (data) {
                       var dialog = main.ship.calltags.dialog.buildDialog(data);
                       dialog.open();
                    })
                    .always(function (data) {

                        isModelDialogOpen = false;
                    });
            }
        });