Question

jQuery UI对话框让我感到震惊。据我所知，这是它的工作原理：

执行$('#myDialog').dialog({...})时，它会复制#myDialog元素并将其移动到body标签底部的这个奇怪的widget内容中。这太疯狂了！它会在执行此操作时复制可能唯一的DOM元素（带有id）。

所以我要做的就是当我刷新原始元素的HTML（#myDialog）时，让它以可预测的方式运行。如果我动态执行此操作，有时对话框不再打开：

或者有时会使用旧的HTML打开对话框（因为它以某种方式缓存在页面底部）。这是怎么回事？

Answer 1

由于似乎没有人知道如何驯服这个野兽对话，所以这是我迄今为止提出的最好的事情。我会接受任何优越的选择。

var original = $('#dialogId')[0];
var clone = $(original).clone().attr('id', 'dialogIdClone');
var saveHtml = $(original).html();
$(original).html('');
$(clone).dialog({
    ... // other options
    open: function (){
        // add any dynamic behavior you need to the dialog here
    },
    close: function(){
        $(clone).remove();
        $(original).html(saveHtml);
    }
});

这种疯狂的目的是使原始对话框的HTML在页面上保持唯一。我不确定为什么这不能成为对话框的内置行为......实际上，我不明白为什么jQuery UI需要克隆HTML开始。

Answer 2

我知道这已经发布了一段时间，但处理这个问题的方法不那么广泛：

$('#your-dialog').dialog({
    ... // other options
    open: function (){
        // add any dynamic behavior you need to the dialog here
    },
    close: function(){

    }
});
$('#your-dialog').remove();

这是因为对话框小部件希望能够控制显示，并将包装原始对话框的内部内容，然后在正文的底部创建一个全新的内容。

此解决方案的缺点是必须首先对话框进行初始化，以确保所有第三方库小部件都能正常运行。

Answer 3

为什么不在关闭函数上调用$（“＃dialogId”）。dialog（“destroy”），如下所示：

$("#dialogId").dialog({
     close: function() {
         $(this).dialog("destroy");
         // you may want empty content after close if you use AJAX request to get content for dialog
         $(this).html('');
     }
}

destroy函数将删除修饰的代码，下次显示对话框时，对话框元素将不会重复。

我向jsfiddle.net example添加了示例代码。

Answer 4

在打开对话框之前，您需要清空对话框。

$("#dialogId").html('');
$("#dialogId").dialog({
 close: function() {
     $(this).dialog("destroy");
 }
}

jQuery UI Dialog表现不可预测

4 个答案: