Question

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

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

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

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

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

Answer 1

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

var injectedDomElement = ...;
$(document).one("pagehide", function(){
    injectedDomElement.remove();
}

jQuery Mobile：动态加载内容膨胀DOM

1 个答案: