javascript & jQuery mobile：导航到 <div data-role="page"></div>答案

【问题标题】：javascript & jQuery mobile: navigate to <div data-role="page"></div>javascript & jQuery mobile：导航到 <div data-role="page"></div>
【发布时间】：2012-07-06 15:18:38
【问题描述】：

我对 jQuery Mobile 比较陌生。所以，我不知道框架功能的每个角落。

我目前在历史记录和动态页面导航方面遇到了一些问题。

基本上，我想实现以下目标：

我有一个通过按钮单击更改内容的网页。 “主页”页面应显示<div data-role="page" id="list_root">...</div>。通过单击按钮，页面应导航到<div data-role="page" id="list_123">...</div>。我希望能够使用返回按钮返回 div "#list_root" 的内容。

在使用 jQuery 之前，我确实使用 history.pushState(divContent, null, "#list_<id>") 自己实现了这一点，并用新内容替换了旧内容。但是，pushState 插件默认使用 jQuery mobile 禁用。

按下导航按钮的定义如下：

<a href='#list_<id>' class='...'>...</a>

我确实尝试通过实现“onhashchange”的回调来实现新 div 内容的创建（对于 list_）。但是这个事件永远不会被调用。

另外，如果我能在点击链接时创建内容，我想显示<div id="list_<id>">的内容，替换之前的内容。

由于应用程序呈现大量数据 - 我不想使用 jQuery mobiles 的嵌套列表。

您对我如何使用框架功能实现这一点有任何提示吗？

编辑：

我有以下情况：

<div data-role="page" class="type-interior" id="main_window">
    <div id="current" class="ui-content" data-role="content" role="main">
        <div id="list_root" data-url="list_root">
        <div id="list_123" data-url="list_123" data-role="page">
    </div>
</div>

如您所见，“list_root”是默认的“起始页”，会按预期显示。

我为 click() 添加了一个事件监听器来动态创建 <div id="list_123"> 的内容 via：

document.addEventListener('click', function(e) {
       ... create it ...
       e.stopPropagation();
   }, true)

这行得通。

按钮的创建方式如下：

<a href="#list_123" data-role="button">List_123</a>

div 内容创建成功，然后 url 中的哈希更改为#list_123。但是页面不显示。这里的问题是<div data-role="page" id="list_123">...</div> 位于<div data-role="page" class="type-interior" id="main_window"> 标签内吗？我下次试试！

【问题讨论】：

我并没有真正遵循您在这里尝试做的事情，更多代码可能会有所帮助，或者为什么不是 jsfiddle？

标签： javascript jquery jquery-mobile browser-history hashchange

【解决方案1】：

很简单。
使用 href 导航到任何页面，例如

<a href='#pageId' data-role="button>Page 2</a>

然后返回使用 data-rel='back' Like

<a href="javascript:;" data-role="button" data-rel="back">Back</a>

演示：http://jsfiddle.net/nachiket/5rLAf/

【讨论】：

是的，我也尝试过（如上所述）。我用代码示例编辑了问题！

【解决方案2】：

如上所述 - 我遇到的问题是，您要导航到的新页面必须始终位于 <div data-role='page'><div data-role='content'>....</div></div> 标记和 body 标记的子元素内。

现在可以正常使用了！

谢谢！

【讨论】：