如何禁用双击 Jquery 模态对话框按钮？答案

【问题标题】：How can I disable double click on Jquery Modal Dialog button?如何禁用双击 Jquery 模态对话框按钮？
【发布时间】：2013-03-21 11:47:09
【问题描述】：

我正在使用 Jquery Modal Dialog 将一些数据提交到服务器端，然后保存到数据库中；这里我的模态对话框代码是：

    function loadUserDialog(tag, event, target, id) {
            event.preventDefault();

$.validator.unobtrusive.parse('#frmModalPopup');

            var $loading = $('<img src="@Url.Content("~/Content/images/ajaxLoading.gif")" alt="loading" class="ui-loading-icon" style="margin: 150px 150px;">');
            var $url = $(tag).attr('href');
            var $title = $(tag).attr('title');
            var $dialog = $('<div></div>');
            $dialog.empty();
            $dialog
            .append($loading)
            .load($url)
              .dialog({
                  autoOpen: false
               , title: $title
               , width: 500
               , modal: true
               , minHeight: 400
               , show: 'fade'
               , hide: 'fade'
              });
            $dialog.dialog("option", "buttons", {
                "Submit": function () {
                    var dlg = $(this);
                    if (IsValidUserName() && $('#frmModalPopup').validate().form()) {
                        $.ajax({
                            url: $url,
                            type: 'POST',
                            data: $(target).serialize(),
                            success: function (response) {
                                var cid = $(response).attr('id');
                                if (cid != null && cid != undefined) {
                                    $(response).fadeIn('slow').appendTo(id);
                                    $(window).scrollTop($('#' + cid).offset().top);
                                }

                                dlg.dialog('close');
                                dlg.empty();
                            },
                            error: function (xhr) {
                                alertMessage("EmailId is already in use!");
                                $.validator.unobtrusive.parse('#frmModalPopup');
                            }
                        });
                    }
                },
                "Cancel": function () {
                    $(this).dialog('close');
                    $(this).empty();
                }
            });

            $dialog.dialog('open');
        };

但是当我一次多次点击提交按钮时（不止一次），表单被提交了不止一次，我得到了重复的数据提交信息。那么您能否告诉我如何禁用双击或多次单击按钮提交。

【问题讨论】：

您所拥有的只是 .net 和 mvc 标签。根本没有jquery标签！
停止如何防止提交触发两次？

标签： javascript jquery

【解决方案1】：

在第一次提交时禁用对话框，在继续之前检查它是否被禁用，如果已经禁用则返回。

"Submit": function () {
  if ($(this).hasClass("disabled"))
    return;

  $(this).addClass("disabled");

  // continue;
}

编辑：您可以使用此方法添加一些额外的用户界面响应能力，方法是在禁用它时添加“正在工作...”或其他消息

$(this).addClass("disabled");
$dialog.append("Working...");

【讨论】：

【解决方案2】：

jquery ui 有一个不错的函数，名为 isOpen()。如果对话框已关闭，但我们可以看到它以防止下次单击，我们可以使用函数 isOpen()：

"Submit": function () {
    if( $(this).dialog("isOpen") ){
        YOUR CODE           
    } else {
        return false;
    }
    $(this).dialog("close");
}

【讨论】：

【解决方案3】：

我需要禁用按钮以避免双击，但我需要在提交异步表单后重新启用按钮。

为此，我使用了一个窗口变量，它并不优雅但实用：

function openDialog() {
    window.clickOk = false;
    $("#divAnagrafica").dialog({
      ......
        buttons: [
                {
                    text: "Ok",
                    click: function () {
                        if (window.clickOk === true) {
                            return; 
                        }
                        window.clickOk = true;
                        $("#myForm").submit();
                    }
                },

【讨论】：

【解决方案4】：

您可以在第一次点击发生后立即禁用按钮上的指针事件：

pointer-events CSS 属性在什么情况下设置（如果 any) 特定的图形元素可以成为指针的目标事件

pointer-events: none 表示：

元素永远不是指针事件的目标；然而，指针如果这些后代具有，则事件可能会针对其后代元素指针事件设置为其他值。在这些情况下，指针事件将触发此父元素上的事件侦听器在活动期间适合他们往返后代的途中捕获/冒泡阶段。

click: function (e) {
   //your code to open dialogue etc..
   `$`(e.target).css('pointer-events', 'none');
   //your code}

【讨论】：