如何禁用双击Jquery模式对话框按钮？

Question

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

    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');
        };

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

Answer 1

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

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

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

  // continue;
}

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

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

Answer 2

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

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

Answer 3

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

对于这个我使用一个窗口变量，它不优雅但功能：

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

Answer 4

您可以在第一次单击时立即禁用按钮上的指针事件：

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

pointer-events：none表示：

元素永远不是指针事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则指针事件可以将其后代元素作为目标。在这些情况下，指针事件将在事件捕获/冒泡阶段期间在它们往返于/从后代的路上适当地触发此父元素上的事件侦听器。

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