我正在使用MVC js lib(emberjs),它将动态创建和更改页面(视图)。如何使用jQuery Mobile手动触发页面创建?
这是我的jsFiddle - http://jsfiddle.net/mattkime/Aczye/3/
创建了带有页眉和页脚的jQuery Mobile页面。在setTimeout为1秒后,该页面将从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);
答案 0 :(得分:2)
请勿删除第1页,否则将无法从第2页转换到第2页。
/** 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
进行后续保护。由于某些jQuery移动版本仍需要较旧版本的jquery,因此离开.bind
。