在 jQuery Mobile 中更改页面会导致奇怪的格式问题

Question

我有一个单页 jQuery 移动应用程序，它由几个动态填充的列表视图组成。每当我第一次访问一个页面时，它们都会正确加载并且所有格式看起来都很棒，但是如果我导航到另一个页面然后返回它，该页面的所有内容都会向上“推”大约 50%。

只有当我点击类似于

的链接时才会出现此问题

<a href="#mypagewithlist">something</a>

而不是按下后退按钮（这不会导致 page() 调用）。

以下是一些页面的示例：

<div data-role="page" id="pagewithlist">
    <div data-role="content">
        <ul data-role="listview" id="mylistview"> </ul>
        <!-- I use jQuery Templates to populate the above list -->
    </div>
</div>
<div data-role="page" id="pagewithlink">
    <div data-role="content">
        <a data-role="button" href="#pagewithlist">Go to page with list</a>
    </div>
</div>

在第一次加载页面时，我从 API 中提取数据，然后使用该数据用 jQuery 模板填充空列表。

任何想法如何解决这个问题？

Answer 1

您的原始页面（您使用链接返回的那个页面）的数据 URL 是什么？您是否尝试过为该页面 (div) 分配一个 ID 并将链接更改为 <a href="#mypagewithlist">something</a>？如果链接和页面的 data-url 不匹配，jQM 会再次获取原始页面，然后在 DOM 中加载两次，这可能会导致问题。

Answer 2

您是否尝试在返回页面时更新列表？即：

$('ul').listview('refresh');