正确整理jQuery对话框

Question

我在使用jQuery的对话框小部件时遇到了一个问题。。。

我有一个解决方案，但想知道是否有更标准的方法(或者我误解了一些东西)：

背景

我有一个网站大量使用AJAX，因为大多数时候只更新页面的一部分。页面的一部分包含一些打开对话框的JS。当在这一部分和另一部分之间切换时，第二次打开对话框时，事情会变得一团糟。

原因

$el.dialog()将要成为弹出窗口的DOM元素($el[0])从文档层次结构中的原始位置移除，并将其附加到文档主体。当我移除弹出元素的原始父元素时，弹出元素不会被移除。

这意味着再次执行此操作(更改/删除页面的该部分，然后再将其更改回)会导致重复的元素ID，这无疑会混淆对话框小部件。

解决方案

我提出了一个覆盖$.fn.dialog函数并利用jQuery特殊事件的解决方案。它将侦听器附加到原始父元素上的自定义事件"destroyed"，当jQuery删除任何元素时会触发"destroyd"事件，侦听器对此事件的反应是删除弹出元素，无论它现在在文档继承结构中的哪个位置。

这是：

(function($) {
$.event.special.destroyed = {
remove: function(o) {
if (o.handler) {
o.handler.apply(this, arguments);
}
}
};
var originalDialogFn = $.fn.dialog;
$.fn.dialog = function(firstArg) {
if (!this.data('dialog') && firstArg != 'destroy' && !this.data('dialogCleaner')) {
this.data('dialogCleaner', true);
var $parent = this.parent();
var $dialogEl = this;
$parent.bind('destroyed', function(e) {
if (this == $parent.get(0)) {
$dialogEl.remove();
}
});
}
return originalDialogFn.apply(this, arguments);
};
})(jQuery);

有更好的方法吗？这似乎是jQuery对话框工作方式中的一个小缺陷，因为要把它整理好并不是那么容易，而且一般来说是。

当然，我知道dialog('destroy')方法，但似乎不太容易将其挂接到页面片段/部分处理中。

Answer 1

在这些情况下，你可以做我做的事情。在创建对话框之前捕获父元素，然后在创建对话框后，将其从DOM分离并重新附加回父元素。

var dlg = $('selector.dialog'),
dlgParent = dlg.parent();
dlgParent.append(dlg.dialog().detach());

这在处理ASPX表单时尤其有效(因为我需要从中获取回发值的任何服务器端标记都必须保留在表单中)。