jQuery Mobile：動態加載的內容膨脹DOM

TLDR：注入並通過AJAX將彈出組件替換爲div會導致jQM在div外部插入自己的疊加元素而不刪除它們。jQuery Mobile：動態加載的內容膨脹DOM

我有一個JQM web頁面動態加載的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")，然後檢查一些屬性。

來源

2012-07-20 Alejo

您可以將注入頁面的元素保存到變量中，然後使用jQuery的.remove()運算符Documentation。

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

來源

2012-07-20 14:45:34 Calavoow

不幸的是，這不是刪除重疊元素。 jQuery文檔確實用.remove（）表示，「所有與元素相關的綁定事件和jQuery數據都被刪除了」，但我猜JQM創建的疊加層本身並沒有被綁定到我注入的元素上。 – Alejo 2012-07-20 19:59:08

因此它不會從DOM中刪除元素？這很奇怪，因爲jQM是否對元素做了任何事情都沒關係。也許只適用於函數綁定，但不適用於DOM元素... – Calavoow 2012-07-20 22:33:30

它刪除了我注入的元素，而不是JQM在通過元素解析時創建的元素。我無法在頁面中匹配覆蓋類的** all **元素上調用'.remove（）'，因爲頁面上可能有一些與我注入的元素完全無關的彈出窗口。這就是爲什麼我想知道疊加層是否有一些屬性表明它們已經「陳舊」了。 – Alejo 2012-07-23 12:36:10

jQuery Mobile：動態加載的內容膨脹DOM

回答

相關問題