javascript - JQuery Mobile ui-overlay 隐藏元素

Question

我正在创建一个 JQuery Mobile 网络应用程序，但遇到了一个有趣的问题。我的网络应用程序从 JSON 数据动态填充 ListView 。

问题:当用户点击第 1 页 ListView 中的元素时，第 2 页加载正常，但是，当他们点击“后退”按钮时，第 1 页无法正确显示。

我最初认为这些行没有被填充，但是我没有弄清楚它们被 JQuery Mobile CSS 隐藏了:(从 JQuery Mobile 1.4.2.css 的第 946 行开始，可以在这里找到: http://jakeserver.com/Apps/BostonLandmarks/B7/css/jquery.mobile-1.4.2.css )

/* Page and overlay */
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
    background-color:           #f9f9f9 /*{a-page-background-color}*/;
    border-color:           #bbb /*{a-page-border}*/;
    color:                  #333 /*{a-page-color}*/;
    text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/     #f3f3f3 /*{a-page-shadow-color}*/;
}

遇到问题的页面:http://jakeserver.com/Apps/BostonLandmarks/B7/landmarks.html呈现菜单行的 JavaScript:http://jakeserver.com/Apps/BostonLandmarks/B7/js/landmarks.js

我注意到，如果 background-color 被注释掉，行就会出现(但会出现其他视觉错误)，但是，它们似乎位于页面的较低层。

关于可能导致此分层问题的原因有什么想法吗？

谢谢。

Answer 1

我相信这最终是详细信息页面上后退按钮的问题。

后退按钮代码原来是:

<a href="#landmarks" data-transition="slide" data-direction="reverse" data-icon="arrow-l" data-rel="back" data-theme="a">Back</a>

但是，我认为 href 和 data-rel 是冲突的。我删除了 data-rel 并保留了 href，页面分层问题就消失了。

故事的寓意:如果您知道要返回到哪个页面(并且不依赖于浏览器的历史记录)，则最好href 到该页面，因为这样会减少冲突。