TLDR：通过AJAX将弹出组件注入并替换到div中会导致jQM在div之外插入自己的覆盖元素而不删除它们。
我有一个jQM网页，它在ajax调用成功时动态加载div标记的内容：
$("#contentPane").html(data).trigger("create");
ajax调用可以进行多次，每次都替换div以前的内容。加载的内容各不相同：它们可能具有与以前相同的组件，也可能完全不同。
我注意到的是，如果我注入的内容包含从页面"弹出"的UI组件（例如对话框或带有data-native-menu = "false"的选择菜单），JQM会将覆盖元素直接插入到我的活动页面主内容分区之外的body标记或活动页面标记中。
例如：
<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")，然后检查一些属性。
您可以将注入页面的元素保存到一个变量中，然后使用jQuery，Documentation中的.remove()运算符。
var injectedDomElement = ...;
$(document).one("pagehide", function(){
injectedDomElement.remove();
}