jquery-ui-dialog - jQuery UI 对话框的行为不可预测

Question

jQuery UI 对话框让我兴奋不已。据我所知，这是它的工作原理:

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

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

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。