3

TLDR：通过 AJAX 将弹出组件注入然后替换到 div 会导致 jQM 在 div 之外插入自己的覆盖元素而不删除它们。

我有一个 jQM 网页，它在 ajax 调用成功时动态加载 div 标签的内容：

$("#contentPane").html(data).trigger("create");

ajax 调用可以进行多次，每次都替换 div 的先前内容。加载的内容各不相同：它们可能具有与以前相同的组件，或者它们可能完全不同。

我注意到的是，如果我注入的内容包含从页面“弹出”的 UI 组件（例如对话框或data-native-menu = "false"带有活动页面的主要内容 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")然后检查一些财产。

4

1 回答 1

0

您可以将注入页面的元素保存到变量中，然后使用.remove()jQuery 中的运算符Documentation。

var injectedDomElement = ...;
$(document).one("pagehide", function(){
    injectedDomElement.remove();
}
于 2012-07-20T14:45:34.183 回答