JQuery UI 对话框只工作一次答案

【问题标题】：JQuery UI Dialog box only works onceJQuery UI 对话框只工作一次
【发布时间】：2013-05-16 18:26:37
【问题描述】：

我有一个 JQuery UI 对话框，可以在其中打开另一个页面。在我单击取消并尝试再次单击它后，它没有打开。我在网上搜索并找到了一个答案，说我只需要初始化一次对话框，然后在用户单击按钮时调用 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');

【问题讨论】：

您在加载新页面时是否替换了#dialog 元素？
会不会因为任何原因打电话给_destroy()？你也可能会失去你的身份证。
我多次重复使用对话框从来没有遇到过任何问题。我看到您在打开之前加载了一个 url...您的 url 是否可能包含其他 id 等于您的对话框 id 的元素导致冲突？

标签： javascript jquery jquery-ui dialog jquery-ui-dialog

【解决方案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');

【讨论】：

【解决方案2】：

也许不是一个正确的答案，但几个月前我遇到了类似的问题，这是因为“modal:true”属性。我必须删除 modal 属性才能使按钮起作用。我认为这是jquery中的一个错误。

【讨论】：

【解决方案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');
        }
    }]
});

【讨论】：