TLDR:通过 AJAX 将弹出组件注入(inject)然后替换到 div 会导致 jQM 在 div 之外插入自己的覆盖元素而不删除它们。
我有一个 jQM 网页，它在 ajax 调用成功时动态加载 div 标签的内容:
$("#contentPane").html(data).trigger("create");
ajax 调用可以进行多次，每次都会替换 div 的先前内容。加载的内容各不相同:它们可能与之前的内容具有相同的组件，或者它们可能完全不同。
我注意到的是，如果我注入(inject)的内容包含从页面“弹出”的 UI 组件(例如一个对话框，或者一个带有 data-native-menu = "false") JQM 将覆盖元素直接插入正文标记或事件页面标记中，在我的事件页面的主要内容 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 中。如果我注入(inject)的新内容也需要覆盖元素，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") 然后检查一些属性。
最佳答案
您可以将注入(inject)到页面中的元素保存到一个变量中，然后使用 jQuery 中的 .remove() 运算符，Documentation .
var injectedDomElement = ...;
$(document).one("pagehide", function(){
injectedDomElement.remove();
}
关于html - jQuery 手机 : Dynamically loaded content bloating the DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11580998/