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 mobile和动态创建的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");
```
注意：最后2个jquery行（注释）就是为了表明这一点页面导航在第一次之后仍然有效。
最后，你不应该使用hide（）和show（）函数来显示/隐藏页面。

Jquery Mobile +动态创建的页面

1 个答案: