Jquery 移动 + 动态创建的页面

Question

我正在动态创建 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 移动和动态创建的错误 html？

Answer 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");
```
注意：最后 jquery 两行（注释）只是为了表明页面导航在第一次后仍然有效。
最后，您不应该对 display/hide 页面使用 hide() 和 show() 函数。

Jquery 移动 + 动态创建的页面

Jquery Mobile + Dynamically Created pages

jquery

jquery-mobile