正确整理jQuery对话框

Question

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

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

背景

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

原因

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

这就意味着这样做(更改/移除页面的这一部分，然后将其更改回来)，所有这些都会导致重复的元素it，这并不令人意外地把对话框小部件弄糊涂了。

解决方案

我想出了一个覆盖$.fn.dialog函数并使用jQuery 特别活动的解决方案。它将侦听器附加到原始父元素上的自定义事件“销毁”，当jQuery删除任何元素时将触发“销毁”事件，监听器对此事件的反应是将弹出元素移除到文档中的任何位置。

下面是：

(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表单时特别有效(因为我需要获得回发值的任何服务器端标记都必须保留在表单中)。