Question

我已经构建了一个包含多个内部页面的应用程序，例如：

<div id="states" data-role="page">
  <div data-role="header"> <a href="#" onClick="parent.history.back()" data-icon="back">Back</a>
    <h1>My List</h1>
  </div>
  <!-- /header -->
  <div data-role="content"></div>
  <!-- /content -->
  <div data-role="footer" data-position="fixed" data-id="myfooter">
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="gear">Option</a></li>
        <li><a href="#" data-icon="home">Home</a></li>
        <li><a href="#" data-icon="search">Search</a></li>
      </ul>
    </div>
    <!-- /navbar --> 
  </div>
  <!-- /footer --> 
</div>
<!-- /page -->

初始化页面时，我会加载XML文件并动态填充页面。这很好用。如果我刷新默认内部页面上的屏幕，它会重新加载而不会出现问题。我可以走一到两页深，按下后退按钮......这也可以。我正在使用此代码来维护我的哈希历史记录（我是菜鸟）。

$(document).bind( "pagebeforechange", function( e, info ) {
    if ( typeof info.toPage === "string" ) {
        var u = $.mobile.path.parseUrl( info.toPage ),
            re = /^#.../;

        if ( u.hash.search(re) !== -1 ) {
            buildLists( u, info.options );
            e.preventDefault();
        }
    }
});

当我转到另一个页面并点击刷新时出现问题，我的数据以未定义的形式返回，并且我的所有data.find（...）调用都是无效的，抛出错误。

有人有这个问题吗？如何确保我的数据是a）保留或b）重新加载。有什么我想念的吗？

我调查了this code，但这并不像我要求的那样动态。我的所有列表视图都通过XML填充。

Answer 1

你正在听错事件。更改哈希值时会触发pagebeforechange。您希望在哈希更改时更改它，例如，当浏览器设置哈希时。听取'hashchange'。我建议学习如何在没有jQuery的情况下做这些事情，因为图书馆只是隐藏了实际的技术。

如果这不起作用，放弃jQuery（我讨厌它永远不会使用它，所有我的网站都可以在所有设备上运行）。还有很多其他方法可以做到这一点。这是一个：http://www.davidpirek.com/blog/on-hash-change-javascript-listener

jQuery在浏览器刷新时丢失XML数据

1 个答案: