如何使用 jQuery Mobile 手动触发页面创建？答案

【问题标题】：How can I manually trigger page creation with jQuery Mobile?如何使用 jQuery Mobile 手动触发页面创建？
【发布时间】：2012-08-14 20:34:33
【问题描述】：

我正在使用 MVC js lib (emberjs)，它将动态创建和更改页面（视图）。如何使用 jQuery Mobile 手动触发页面创建？

这是我的 jsFiddle - http://jsfiddle.net/mattkime/Aczye/3/

创建了一个带有页眉和页脚的 jQuery Mobile 页面。在 1 秒的 setTimeout 之后，该页面从 DOM 中移除并插入新内容但无法显示。你会看到我失败的代码。

（注意，路由已关闭，因为它由 ember 处理）

如何让新标记显示为 jQuery Mobile 增强页面？

代码：

/** disables jQM routing **/
$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
});

// removes hidden pages
$('div[data-role="page"]').live('pagehide', function (event, ui) {
    $(event.currentTarget).remove();
});


var pageTwo = '<div id="pageTwo" data-role="page"><div data-role="header"><h1>header2</h1></div> <div data-role="content">...</div><div data-role="footer" data-position="fixed"><h1>footer2</h1></div></div>';

setTimeout(function(){
    $('#pageOne').remove();
    $('body').append(pageTwo);
    $('#pageTwo').page();
    //alert($('#pageTwo').length);
    //$.mobile.changePage($('#pageTwo'));
},1000);

【问题讨论】：

标签： javascript jquery mobile jquery-mobile mobile-website

【解决方案1】：

不要删除第 1 页，否则将无法从它过渡到第 2 页。

http://jsfiddle.net/Aczye/4/

/** disables jQM routing **/
$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
});

// removes hidden pages
$(document).delegate('div[data-role="page"]', 'pagehide', function (event, ui) {
    $(event.currentTarget).remove();
});


var pageTwo = '<div id="pageTwo" data-role="page"><div data-role="header"><h1>header2</h1></div> <div data-role="content">...</div><div data-role="footer" data-position="fixed"><h1>footer2</h1></div></div>';

setTimeout(function(){
    //$('#pageOne').remove();
    $('body').append(pageTwo);
    $.mobile.changePage("#pageTwo");
    //alert($('#pageTwo').length);
    //$.mobile.changePage($('#pageTwo'));
},1000);

编辑：更新为使用 .delegate 进行未来验证。离开 .bind，因为一些 jQuery 移动版本仍然需要旧版本的 jquery。

【讨论】：