jQuery UI Dialog表现不可预测

Question

jQuery UI对话框让我感到震惊.据我所知,这是它的工作原理:

当你这样做时$('#myDialog').dialog({...}),它会复制#myDialog元素并将其移动到body标签底部的这个奇怪的widget部件中.这太疯狂了!它会在执行此操作时复制可能唯一的DOM元素(带有ID).

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

http://jsfiddle.net/t67y7/3/

或者有时会使用旧的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

为什么不在 close 函数上调用 $("#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添加了示例代码。