0

jQuery のDialogウィジェットを使用しているときに問題が発生しました...

私には解決策がありますが、より標準的な方法があるかどうか疑問に思いました（または何かを誤解していました）：

バックグラウンド

私は AJAX を多用する Web サイトを持っています。ほとんどの場合、ページの一部のみが更新されます。ページの一部には、ダイアログを開く JS が含まれています。その部分と別の部分をめくるとき、もう一度ダイアログを開くと、物事が台無しになります。

理由

$el.dialog()ポップアップ ( ) になる DOM 要素を$el[0]ドキュメント階層の元の場所から削除し、代わりにドキュメント本体に追加します。その後、ポップアップ要素の元の親要素を削除しても、ポップアップ要素は削除されません。

これは、これを行うこと (ページのその部分を変更/削除してから元に戻す) がすべて再び重複した要素 ID をもたらし、ダイアログ ウィジェットを混乱させることを意味します。

解決

関数をオーバーライドし、jQuery の特別なイベント$.fn.dialogを利用するソリューションを考え出しました。元の親要素のカスタム イベント '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

これらの状況で私がすることをすることができます。ダイアログを作成する前に親要素をキャプチャし、ダイアログの作成後に DOM から切り離して親要素に再度追加します。

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

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

これは、ASPX フォームを扱う場合に特にうまく機能します (ポストバック値を取得する必要があるサーバー側のタグはフォーム内に残す必要があるため)。

于 2012-11-27T12:37:55.027 に答える