javascript - iOS7 和 jQuery 移动 : panel goes blank once opened and closed

Question

我刚刚遇到了一个非常奇怪的问题。我正在使用 jQuery mobile 并为网站制作移动版本。有一个列表页面有自己的过滤器。过滤器位于面板中，它会滑出，您选择过滤器，它会关闭并过滤列表。非常基本。现在，当从 iOS 7 iPhone 访问同一个应用程序时，第一次过滤某些内容时它可以正常工作。但如果你再次打开过滤器，它就是空白的。但过滤器仍然位于它们应该在的位置，如果您只需点击您认为过滤器应该在的位置，它们就会出现并过滤列表，因为没有任何问题。之后就一直这样。

这是我用来打开面板的 anchor

<a id="friendsFilterAnchor" href="#friendsFilterPanel" data-mini="true" data-role="none" data-iconpos="right" class="ui-icon ui-icon-filter frindes-filter filter-ico" data-theme="a" title="Filter"></a>

面板看起来像这样

<div data-role="panel" id="friendsFilterPanel" data-position-fixed="true"  data-position="right" data-display="overlay" data-theme="b">
        <ul id="friendsFilterList" data-role="listview"  data-theme="e" data-divider-theme="a">
            <li data-icon="ffTick" class="selected"><a href="javascript://" >All</a></li>
            <li data-icon="false"><a href="javascript://">Pending</a></li>
            <li data-icon="false"><a href="javascript://">Users</a></li>
        </ul>
    </div><!-- /panel -->

有人见过这样的事情吗？

Answer 1

问题是在不同页面上使用相同的 id。上一页也在 dom 中，并且有相同的 id。使用相对选择器，即通过在同一页面上搜索来获取 div，这在 javascript 中通常是一个很好的做法。