Question

使用jQuery的Dialog小部件时出现问题...

我有解决方案，但想知道是否有更标准的方法（或者我误解了某些内容）：

背景

我有一个大量使用AJAX的网站，因为大多数情况下只会更新页面的某些部分。页面的一部分包含一些打开对话框的JS。当在该部分和另一部分之间翻转时，在第二次打开对话框时，事情就会搞砸了。

原因

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

这意味着这样做（更改/删除页面的那一部分，然后再将其更改）都会导致重复的元素ID，这无疑会让对话框小部件完全混淆。

解决方案

我提出了一个覆盖$.fn.dialog函数并使用jQuery special events的解决方案。它将侦听器附加到原始父元素上的“已销毁”自定义事件，当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表单时效果特别好（因为我需要从中获取回发值的任何服务器端标记都必须保留在表单中）。

正确整理jQuery对话框

背景

原因

解决方案

1 个答案: