Jquery Mobile + 动态创建的页面答案

【问题标题】：Jquery Mobile + Dynamically Created pagesJquery Mobile + 动态创建的页面
【发布时间】：2015-03-09 14:34:43
【问题描述】：

我正在动态创建 jquery 移动页面，唯一显示的页面是我创建的第一个页面。正在创建所有 html 元素。我尝试使用...

$.mobile.changePage("#page2");

什么都没发生

所以我尝试使用

$("#page1").hide();
$("#page2").show();

使用此代码 page1 会隐藏，但 page2 不会显示。

我也尝试过将它们组合起来

$("#page1").hide();
$("#page2").show();
$.mobile.changePage("#page2");

用于在部分内生成 html 页面的字符串。

"<div data-role=\"page\" id=\"page1\" data-theme=\"b\" data-content-theme=\"b\"><h1>Page 1</h1></div>"

"<div data-role=\"page\" id=\"page2\" data-theme=\"b\" data-content-theme=\"b\"><h1>Page 2</h1></div>"

这是生成的html：

<body>
<section id="index_page" class="ui-mobile-viewport ui-overlay-b" style="display: none;"><!-- Start of home page --><div data-role="page" id="page1" data-theme="b" data-content-theme="b" data-url="index" tabindex="0" class="ui-page ui-page-theme-b ui-page-active" style="min-height: 901px;"><h1>Page 1</h1></div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span><h1>loading</h1></div></section><section id="page2" style="display: block;"><div data-role="page" id="page2" data-theme="b" data-content-theme="b"><h1>Page 2</h1></div></section>
</body>

知道我可能遗漏了什么，或者这是 jquery mobile 和动态创建的 html 的错误吗？

【问题讨论】：

您是否有未生成的第一页链接到生成的页面？或者你只是有一个body标签并且每个页面都在后面生成
我有一个body标签，每个页面都在生成。

标签： jquery jquery-mobile

【解决方案1】：

确实，以编程方式从一个页面导航到另一个页面的正确方法是$.mobile.changePage();

我给你做了个例子JsFiddle 您可以在其中看到如何从一个页面导航到另一个注入的页面直接或以编程方式页面。
我用你提供的信息为你做了另一个例子
并要求：JsFiddle 在哪里页面被注入，然后显示。但这似乎是您给我们的相同代码。我不知道为什么它不起作用
你。
```
$("body").append("<div data-role=\"page\" id=\"page1\" data-theme=\"b\" data-content-theme=\"b\"><h1>Page 1</h1></div>");
$("body").append("<div data-role=\"page\" id=\"page2\" data-theme=\"b\" data-content-theme=\"b\"><h1>Page 2</h1></div>");

$.mobile.changePage("#page1");
```
注意：最后 2 行 jquery 行（已注释）只是为了表明页面导航在第一次之后仍然有效。
最后，您不应该使用 hide() 和 show() 函数来显示/隐藏页面。

【讨论】：