JQuery Mobile:动态加载的页面源在DOM中仍然可用，即使在更改页面之后

JQuery Mobile: dynamically loaded page source still available in DOM even after changing the page

本文关键字：之后 DOM 动态 Mobile 加载 JQuery      更新时间：2023-09-26

我是JQuery Mobile新手，有谁能帮我解决这个问题吗?

我有一个列表视图，当我点击一个链接，它会动态创建一个页面。我的问题是，当我在列表视图中点击其他链接，它将创建另一个页面并显示该页面，但之前创建的页面代码仍然可以在由firebug显示的页面源代码中看到。

这是我的HTML列表

<ul data-role="listview" id="device_list">
     <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
     <li><a href="#panel-main">Main panel page</a></li>
     <li><a href="#"  id="v1" onclick="open_device_player(v1)></a></li>       
     <li><a href="#"  id="v2" onclick="open_device_player(v2)></a></li>
     <li><a href="#"  id="v3" onclick="open_device_player(v3)></a></li>
     <li><a href="#"  id="v4" onclick="open_device_player(v4)></a></li>
</ul>
这是我的Jquery函数 
function open_device_player(device_id)   
  {
    var newPage = "<div data-role='page' id='"+device_id+"'><div data-role=header><h1> Device Page </h1></div><div data-role=content><img src='localhost/mjpg/"+device_id+"' width='320'></div></div>";
    $("body").append(newPage);
    $( ":mobile-pagecontainer" ).pagecontainer( "change", "#"+device_id );
  }

你可以这样做:

function open_device_player(device_id)   
{
    var newPage = "<div data-role='page' id='"+device_id+"'><div data-role=header><h1> Device Page </h1></div><div data-role=content><img src='localhost/mjpg/"+device_id+"' width='320'></div></div>";
    $("body").append(newPage);
    $(document).on('pagehide', '#'+device_id,function () {
        $(this).off('pagehide');
        $(this).remove();
    });
    $( ":mobile-pagecontainer" ).pagecontainer( "change", "#"+device_id );
}
这样，当您创建动态页面时，您将立即绑定一个pagehide事件。当您最终离开动态创建的页面时，它将触发set pagehide事件，从而从DOM中删除页面并删除绑定页面事件。

还看这个:

$(document).on('pagehide', '#'+device_id,function () {
    $(this).remove();
    $(this).off('pagehide');
});

这种方式的页面事件绑定不关心页面是否在DOM中。当所提到的页面在DOM内并且您要离开它时，它就会触发。

jQuery Mobile默认将所有页面和动态加载的页面(使用AJAX)存储在DOM中(有助于更快的页面转换)。这些页面的删除也会自动完成。您不必担心手动从DOM中删除页面，除非您有特定的需求。

您可以在 page hide 事件期间手动删除页面。

$('#pageID').on('pagehide', function () {
   $(this).remove();
});

如果您希望某些页面被存储而不被自动删除，您可以指定 data-dom-cache="true" 。

在最新的JQM版本中 pagehide 事件已被弃用，所以您可以使用

$( ":mobile-pagecontainer" ).on( "pagecontainerhide", function( event, ui ) {});
相关文章：