jQuery UIダイアログが予期せず動作する

Question

jQuery UIダイアログが壁を押し上げます。

$('#myDialog').dialog({...})を実行すると、#myDialog要素がコピーされ、bodyタグの下部にあるこの奇妙なウィジェットの中に移動されます。狂ってる！これを行う際には、おそらくユニークなDOM要素（ID付き）を複製します。

私がしようとしているのは、元の要素（#myDialog）のHTMLをリフレッシュするときに予測可能な振る舞いにすることです。私は動的にこれを行う場合は、時々ダイアログは、それ以上を開きません：

http://jsfiddle.net/t67y7/3/

か（それはページの下部にそのようにキャッシュされているため）時々ダイアログが古いHTMLで開きます。これはどういうことですか？

Answer 1

：。

$("#dialogId").dialog({ 
    close: function() { 
     $(this).dialog("destroy"); 
     // you may want empty content after close if you use AJAX request to get content for dialog 
     $(this).html(''); 
    } 
} 

破壊する機能が飾られたコードを削除し、あなたのだろう次回ダイアログを表示するときにダイアログエレメントが重複しません。

jsfiddle.net exampleにサンプルコードを追加しました。

Answer 2

誰もこの獣のダイアログをいかに巧みに扱うか考えているようではないので、これまで私がこれまでに思いついた最善のことはここにあります。私は優れた選択肢を受け入れます。

var original = $('#dialogId')[0]; 
var clone = $(original).clone().attr('id', 'dialogIdClone'); 
var saveHtml = $(original).html(); 
$(original).html(''); 
$(clone).dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 
     $(clone).remove(); 
     $(original).html(saveHtml); 
    } 
}); 

この完全な狂気の目的は、元のダイアログのHTMLをページ内でユニークに保つことです。どうしてこれがダイアログのビルトインビヘイビアではないのか分かりません...実際、jQuery UIでHTMLをクローン化する必要があるのは分かりません。

Answer 3

私は、これはしばらくの間掲載されているが、この問題を処理するための少ない広範囲な方法は以下のようになり知っている：

$('#your-dialog').dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 

    } 
}); 
$('#your-dialog').remove(); 

これは、ダイアログウィジェットによるものであるが、表示を制御できるようにしたいとラップします元の対話の内容が本体の一番下に新しいものを作成します。

このソリューションの欠点は、すべてのサードパーティライブラリウィジェットが正しく動作するようにダイアログを初期化する必要があることです。

あなただけの$（「＃dialogId」）を呼び出すことはありません。なぜ、このような密接な機能上のダイアログ（「破壊する」）、

Answer 4

ダイアログを開く前に空にする必要があります。

$("#dialogId").html(''); 
$("#dialogId").dialog({ 
close: function() { 
    $(this).dialog("destroy"); 
} 
}