Question

为了使用锚标记加载jQuery移动页面，只需将页面div的id作为href

<a href="#page2">My link</a>
<div data-role="page" id="page2">
    <div data-role="header"></div>
    <div data-role="page"></div>
    <div data-role="footer"></div>
</div>

但这假设页面div已经加载到DOM中。如果你想生成页面并将它们放入DOM中，那会怎么样：

$("body").append(newPageDivHTMLString);

我正在努力做到这一点，但继续得到一个“无法调用未定义的方法_trigger”。

单步执行jQuery mobile（beta 1）源代码，我在第2600行找到了以下代码：

page = settings.pageContainer.children( ":jqmData(url='" + dataUrl + "')" );

其中pageContainer是HTML body元素，dataUrl是我的page div的id。这计算未定义，似乎是我的问题的根源。是否有可能以我自己的方式将页面div插入到jQuery移动页面中？

感谢您阅读一个很长的问题。：）

Answer 1

我刚刚在我的本地机器上测试过，这对我有用：

<html>
<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

<script>

function create_page(page_name) {
    $('body').append('<div data-role="page" id="' + page_name + '"><div data-role="content">Some content in here.</div></div>');
    //EDITED OUT, SEE BELOW $.mobile.changePage($('#' + page_name));
}

</script>
</head>
<body>



<div data-role="page">
<div data-role="content">
<a href="javascript:create_page('test_page_name');" data-role="button" style="padding:15px; font-size:30px;">TEST TEXT</a>
</div>
</div>

</body>
</html>

---- ---- EDIT 也有这个功能：

function change_page(page_name) {
   $.mobile.changePage($('#' + page_name));
}

并使用它来更改为动态创建的页面，如下所示：

<a href="javascript:change_page('test_page_name');" data-role="button" style="padding:15px; font-size:30px;">Change Page</a>

尝试使用哈希（href =“＃test_page_name”）链接到动态创建的页面时有一些奇怪的行为。在firebug中，我看到创建页面函数正确地将新页面附加到正文上，但更改页面按钮将创建另一个页面，其ID与原始页面相同，但是正确设置的数据网址。通过单击更改页面链接创建的data-role = page div也具有与第一个div相同的内容，并且create_page函数创建的页面被忽略。

是否可以使用append（）将页面div插入jQuery移动页面？

1 个答案: