在 jQuery Mobile 中动态添加页面不起作用答案

【问题标题】：Dynamically adding a page in jQuery Mobile not working在 jQuery Mobile 中动态添加页面不起作用
【发布时间】：2011-08-10 01:52:54
【问题描述】：

当我在 jQuery Mobile 中创建一个全新的页面时，该页面被创建，但是当我单击带有链接到刚刚创建的页面的 id 的链接时，它不起作用。列表项链接保持选中状态（蓝色，在标准主题中），但页面本身不会加载。

通过将其附加到正文来创建页面：

$('body').append('<div id="' generatedId '" data-role="page"><div data-role="header"><h2>Page</h2></div><div data-role="content">content</div></div>');

当我关闭 jQuery Mobile 时，您可以清楚地看到页面已创建，但无法访问带有 jQM 的页面。

我做错了什么？

【问题讨论】：

您使用的是什么版本的 jQuery Mobile？
你能把示例代码添加到jsbin.com吗？它应该可以正常工作，也许问题出在其他地方？
使用 1.0b3 你可以试试这个：$('body').append('<div id="'+ generatedId +'" data-role="page"><div data-role="header"><h2>Page</h2></div><div data-role="content">content</div></div>').trigger('create');

标签： jquery ajax mobile jquery-mobile

【解决方案1】：

以下对我有用...

<!DOCTYPE html>
<html>
 <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- standard Jquery/jQuery Mobile Libraries -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>   
<script type="text/javascript">
$(document).ready(function(){
    for(i=0;i<3;i++){
        $('body').append('<div id="test'+i+'" data-role="page"><div data-role="header"><h2>Page'+i+'</h2></div><div data-role="content">content'+i+'</div></div>');
    }
});
</script>
</head> 

<body>  
<div data-role="page" id="mainmenu">
    <div data-role="header"><h1>Sample Home</h1></div>
    <div class="ui-body ui-body-c">
        <div data-role="content">   
            <a href="#test0" class="preShowHTML">Sample 1</a>     
            <a href="#test1" class="preShowHTML">Sample 2</a>     
            <a href="#test2" class="preShowHTML">Sample 3</a>                               
        </div>      
    </div>          
</div>

【讨论】：