Question

我是JQuery Mobile的新手，Jquery可以帮助我解决问题。

我有一个列表视图，因为当我点击一个链接时，它会动态创建一个页面。我的问题是，当我点击列表视图中的其他链接时，它将创建另一个页面并显示该页面，但之前创建的页面代码仍然可以在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 );

  }

Answer 1

你可以这样做：

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内部并且你要离开它就会触发它。

Answer 2

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 ) {});

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

2 个答案: