jQuery UI 对话框的行为不可预测

jQuery UI 对话框让我感到厌烦。据我所知，它的工作原理如下：

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

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

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

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

由于似乎没有人知道如何驯服这种可怕的对话，这是我迄今为止想到的最好的东西。我会接受任何更好的选择。

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。