JQuery ダイアログのメモリリークの問題 solution

ページの場合、JQuery のダイアログは効果という点では悪くなく、数行のバインディングコードだけでポップアップ効果を実現できます。
コード

コードをコピーコードは次のとおりです:

 
$('#dialog ').dialog({ 
autoOpen: false, 
width: 600, 
buttons: { 
"Ok": function() { 
$(this).dialog("close" ); 
}, 
"キャンセル": function() { 
$(this).dialog("close"); 
} 
}; 
 
JS の対話性がほとんどない一部の一般的なページでは問題ありません。しかし、DOM を動的にロードおよび解放する必要がある高度にインタラクティブなページの場合、これは悲劇です。なぜこんなことを言うのですか？次の例を見てください: 

単純なコード部分がページに動的にロードされ、その DIV が Dialog にバインドされてポップアップの目的を達成します。以下のテスト要素は

です。
コード

コードをコピーコードは次のとおりです。

function TestAppend() {

$("#test").append('

'
'アップロード'
'アップロードをキャンセル

');
$('#dialog').dialog({
autoOpen: false,
width: 600 ,
ボタン: {
"OK": function() {
$(this).dialog("close");
},
"キャンセル": function() {
$(this).dialog("close");
}
}
});
return
}

need DOM 要素を削除するには、一般的に、通常のアプローチは $("#test").empty(); この単純なコード行で完了です。これは機能しますか? ！このコードを実行した後、$('#dialog') を使用してダイアログ要素を取得します。これで、憂鬱なことが起こります。なぜ！もう空いてませんか？

この悲劇がどのように引き起こされたのかを見てみましょう。
$('#dialog').dialog に注目して、コードを追跡するときに JQuery 実装コードがどのように記述されているかを見てみましょう。ダイアログクラスの _create メソッドで問題の原因が判明しました。次のコードを確認してください。

コードをコピーコードは次のとおりです。次のように:

uiDialog = (self.uiDialog = $('

'))

.appendTo(document.body)
.hide ( )
.addClass(uiDialogClasses options.dialogClass)
.css({
zIndex: options.zIndex
})
// tabIndex を設定すると div がフォーカス可能になります
// 設定の概要0 に設定すると、Mozilla でフォーカスに境界線が表示されなくなります。 keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE) {
self.close(event)
event.preventDefault();
.attr({
role: 'dialog',
'aria-labelledby': titleId
})
.mousedown(function(event) {
self.moveToTop(false,event) );
}),

また、div を動的に作成し、その div を Body に追加し、ダイアログ内の要素を

から削除します。新しい div に追加します....
これが、$("#test").empty() を実行した後、内部ダイアログに影響を与えない理由です。そして、これには最悪の点があり、メモリリークが最も発生しやすいものでもあります。Body 内に動的に div が作成されるため、フォームが閉じられていない場合は、引き続き上記の TestAppend メソッドを使用して DOM を動的にロードすることになります。このような div を N 個作成します!
実際、この問題のもどかしい部分は解決方法ではなく、深く隠されていて見つけるのが難しいのです。それを発見すると、解決策は非常に簡単になります:

コードをコピーします

コードは次のとおりです: if ($('#dialog')[0]) { $('#dialog').parent().empty(); $('#dialog').parent() .remove( ); }

 
このコードを追加した後、$("#dialog") を実行してテストすると、最終的に期待した結果が表示されました。ダイアログ要素が消えてしまいました。

JQuery ダイアログのメモリ リークの問題 solution_jquery

JQuery ダイアログのメモリリークの問題 solution_jquery