0

使用 jQuery 的Dialog小部件时遇到问题...

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

背景

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

原因

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

这意味着这样做（更改/删除页面的该部分，然后将其更改回来）再次导致重复的元素 ID 毫不奇怪地混淆了对话框小部件。

解决方案

我想出了一个解决方案，它覆盖该$.fn.dialog函数并利用 jQuery特殊事件。它将一个监听器附加到原始父元素上的自定义事件“destroyed”，当jQuery删除任何元素时触发“destroyed”事件，监听器通过删除弹出元素来响应此事件，无论它现在可能在文档层次结构中的任何位置.

这里是：

(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')方法，但似乎并不容易将其挂钩到我的页面片段/部分处理中。

4

1 回答 1

0

You could do what I do in these situations. Capture the parent element prior to making the dialog and then, after the dialog is created, detach it from the DOM and re-append it back to the parent element.

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

dlgParent.append(dlg.dialog().detach());

This works especially well when dealing with ASPX forms (because any server-side tags that I need to get a postback value from must remain within the form).

于 2012-11-27T12:37:55.027 回答