$('#dialog').dialog に注目して、コードを追跡するときに JQuery 実装コードがどのように記述されているかを見てみましょう。ダイアログ クラスの _create メソッドで問題の原因が判明しました。次のコードを確認してください。
.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 個作成します!
実際、この問題のもどかしい部分は解決方法ではなく、深く隠されていて見つけるのが難しいのです。それを発見すると、解決策は非常に簡単になります:
コードをコピーします
このコードを追加した後、$("#dialog") を実行してテストすると、最終的に期待した結果が表示されました。ダイアログ要素が消えてしまいました。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
