TLDR: AJAX を介してポップアップ コンポーネントを挿入してから div に置き換えると、jQM が独自のオーバーレイ要素を削除せずに div の外に挿入します。
ajax 呼び出しの成功時に div タグのコンテンツを動的にロードする jQM Web ページがあります。
$("#contentPane").html(data).trigger("create");
ajax 呼び出しは数回行うことができ、それぞれが div の以前の内容を置き換えます。ロードされるコンテンツはさまざまです。以前に存在していたものと同じコンポーネントを持っている場合もあれば、まったく異なる場合もあります。
私が気づいているのは、挿入するコンテンツに、ページから「ポップアップ」する UI コンポーネントが含まれている場合 (たとえば、ダイアログ、または のdata-native-menu = "false"selectmenu) JQM は、オーバーレイ要素を body タグまたはアクティブなページタグの外側に直接挿入することです。アクティブなページのメイン コンテンツ div。
例えば：
<body>
...
<div class="ui-page ui-body-b ui-page-header-fixed ui-page-active" position="fixed" data-theme="b" data-role="page">
<div id="contentHeader" class="ui-header ui-bar-b ui-header-fixed slidedown" data-theme="b" data-position="fixed" data-role="header" role="banner">...</div>
<div id="contentPane" class="ui-content ui-body-b" data-theme="b" data-role="content" role="main">...</div>
<div class="ui-selectmenu ui-overlay-shadow ui-corner-all ui-body-a pop ui-selectmenu-hidden">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden"></div>
</div>
...
<div class="ui-page ui-body-c ui-dialog ui-overlay-a" data-overlay-theme="a" data-theme="c" data-role="dialog" tabindex="0" style="min-height: 399px;">
</body>
問題は、「contentPane」div のコンテンツを置き換えるたびに、これらのオーバーレイ要素が DOM に残ることです。挿入する新しいコンテンツにオーバーレイ要素も必要な場合、JQM は古いコンテンツを削除せずに新しいコンテンツを作成します。したがって、最終的に私のDOMは次のようになります。
<div class="ui-page ui-body-b ui-page-header-fixed ui-page-active" position="fixed" data-theme="b" data-role="page">
<div id="contentHeader" class="ui-header ui-bar-b ui-header-fixed slidedown" data-theme="b" data-position="fixed" data-role="header" role="banner">...</div>
<div id="contentPane" class="ui-content ui-body-b" data-theme="b" data-role="content" role="main">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden" style="height: 3150px;"></div>
<div class="ui-selectmenu ui-overlay-shadow ui-corner-all ui-body-a pop ui-selectmenu-hidden">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden"></div>
<div class="ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-a pop">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden"></div>
<div class="ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-a pop">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden"></div>
<div class="ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-a pop">...</div>
<div class="ui-selectmenu-screen ui-screen-hidden"></div>
<div class="ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-a pop">...</div>
</div>
機能が損なわれることはないため、これは大きな問題ではありませんが、これがモバイル アプリであることを考えると、手に負えなくなると DOM の肥大化がパフォーマンスの低下につながる可能性があります。
私が疑問に思っているのは、JQMにこれらの古いDOM要素をクリーンアップするように指示できる方法があるかどうか、またはこれらのオーバーレイのいずれかが古くなっているかどうかを自分で確認できる方法があるかどうかです$(".ui-overlay-shadow, .ui-overlay-a")。いくつかのプロパティ。