【问题标题】：Jquery mobile 1.4 navigate to dynamically created pageJquery mobile 1.4 导航到动态创建的页面
【发布时间】：2013-11-12 11:51:05
【问题描述】：

这已经困扰我一段时间了，如果可以的话，请帮忙。

所以我从空白页开始：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

<link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css'>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js'></script>
</head>
<body>

</body>
</html>

</body>
</html>

然后在html中注入一个jqm页面：

$('body').append("<div id='index' data-role='page'><div data-role='header'><h1>Page Title</h1></div><!-- /header --><div data-role='content'><ul data-role='listview'><li>test</li><li>test</li><li>test</li></ul><p>Page content goes here.</p></div><!-- /content --><div data-role='footer'><h4>Page Footer</h4></div><!-- /footer --></div><!-- /page -->")

最后我会重新生成/刷新此页面的标记：

$("body").enhanceWithin()

问题是我如何以编程方式转换到此页面，因为 $.mobile.navigate('#index') 和 $.mobile.changePage('#index') 似乎都没有完成这项工作？

 $(":mobile-pagecontainer").pagecontainer("getActivePage")

对象[div#index.ui-page]

 $(':mobile-pagecontainer').pagecontainer('change', '#index')

对象[body.ui-mobile-viewport]

但是索引页面仍然隐藏在视图中.....

如您所见，我正在使用 jquery.mobile-1.4.0-rc.1，请帮助！

【问题讨论】：

标签： html jquery-mobile navigation markup

【解决方案1】：

解决方案

这是使用 jQuery Mobile 的方法：http://jsfiddle.net/Gajotres/3eHGj/

Javascript：

$(document).ready(function() {    
    $('body').append("<div id='index' data-role='page'><div data-role='header'><h1>Page Title</h1></div><!-- /header --><div data-role='content'><ul data-role='listview'><li>test</li><li>test</li><li>test</li></ul><br><p>Page content goes here.</p></div><!-- /content --><div data-role='footer'><h4>Page Footer</h4></div><!-- /footer --></div><!-- /page -->")
    window.location.hash = 'index';
    $.mobile.initializePage();
});

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(document).on("mobileinit",function() {
                $.mobile.autoInitializePage = false;
            });        
        </script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>

    </body>
</html>

说明

如果没有初始页面，$.mobile.navigate('#index') 和 $.mobile.changePage('#index') 都将不起作用。这些方法要求原始页面存在，然后应用程序才能转移到另一个页面。

【讨论】：

调用 '$.mobile.initializePage()' 将遍历所有当前页面并对所有页面进行初始化。是否可以只初始化刚刚添加的页面？