jQuery UI對話框僅工作一次

Question

我有一個JQuery UI對話框，它在其中打開了另一個頁面。 單擊取消並嘗試再次單擊后，它不會打開。 我在線搜索，發現一個答案，說我只需要初始化一次對話框，並且在用戶單擊按鈕時調用open。 我嘗試將初始化代碼移動到頁面加載部分，並且僅對按鈕執行dialog（“ open”），但是仍然存在與以前相同的問題。 如何設置對話框，以便可以取消並再次打開它？

初始化代碼：

var scanDialog = $( "#dialog" ).dialog({
                  height:600,
                          width:800,
                  modal: true,
                          autoOpen:false,
                  buttons: {
                    "Scan": function() {
                         //scanning code 
                    },
                    Cancel: function() {
                                 scanDialog.load("url.html").dialog("close");
                    }
                  }
                });

加載代碼：

scanDialog.load("url.html").dialog('open');

Answer 1

嘗試從DOM中銷毀對話框

 scanDialog.load("url.html").dialog("destroy");

為了不松散div ID，您可以將對話框ID附加到其父DOM名稱。

     var DialogParent = $(this).parents("div:eq(0)");
      var Diag = myParent.attr('id') + 'Diag';

      var scanDialog = $( "#" + Diag ).dialog({
                  height:600,
                          width:800,
                  modal: true,
                          autoOpen:false,
                  buttons: {
                    "Scan": function() {
                         //scanning code 
                    },
                    Cancel: function() {
scanDialog.load("url.html").dialog("destroy");// Destroy, not close
                    }
                  }
                });

然后，

 $("#" + Diag).dialog('open');

Answer 2

也許這不是一個正確的答案，但是幾個月前我也遇到了類似的問題，這是因為“ modal：true”屬性。 我必須刪除modal屬性才能使按鈕起作用。 我認為這是jquery中的錯誤。

Answer 3

這似乎是一個不必要的討厭問題。 使用“自動對焦”只能使用一次。 某些修復程序在IE中有效，但在Chrome中不起作用。 因此，要解決此問題，我需要幾個步驟，其中一部分是合並上述“ .dialog（'destroy'）”。 我將焦點添加到對話框彈出窗口的“是”按鈕上。

首先，我添加了一個帶有focus（）調用的開放函數。 在我們的系統上，它需要“ setTimeout”包裝器：

open: function()
{
    setTimeout(function() {
        $('#yesDialog').focus();
    }, 100);
},

添加“ id”：

}, id: 'yesDialog'

關鍵的關鍵步驟是將對話框“關閉”更改為“破壞”對話框：

來自：

$(this).dialog('close');

至：

$(this).dialog('destroy');

取出我們特定的絨毛，將它們放在一起看起來像這樣：

var prompt = 'Are you sure?';
$('<p>'+prompt+'</p>').dialog({
    autoOpen: true,
    draggable: false,
    modal: true,
    title: 'Save Data',
    dialogClass: 'no-close',
    open: function() {
        setTimeout(function() {
            $('#yesDialog').focus();
        }, 100);
    },
    buttons: [{
        text: 'Yes',
        click: function() {
            $(this).dialog('destroy');
            //...our fluff
        }, id: 'yesDialog'
    }, {
        text: 'No',
        click: function() {
            $(this).dialog('destroy');
        }
    }]
});