JQuery Mobile ui-overlay Hiding Elements

问题

I am creating a JQuery Mobile web-app and am running into an interesting problem. My web-app dynamically populates a list-view from JSON data.

The problem: When the user taps on an element in the listview in Page 1, Page 2 loads fine, however, when they tap on the "Back" button, Page 1 does not display correctly.

I initially thought that the rows were not being populated, however I have not figured out that they are being hidden by the JQuery Mobile CSS: (starting on line 946 of JQuery Mobile 1.4.2.css which can be found here: 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}*/;
}

Page that experiences problem: http://jakeserver.com/Apps/BostonLandmarks/B7/landmarks.html JavaScript that renders the menu rows: http://jakeserver.com/Apps/BostonLandmarks/B7/js/landmarks.js

I have noticed that if the background-color is commented out, the rows appear (but other visual errors occur), however, they seem to be in a lower layer of the page.

Any ideas about what might be causing this layering issue?

Thanks.

回答1:

I believe this ended up being a problem with the back button on the details pages.

The back button code was originally:

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

However, I believe the href and the data-rel were conflicting. I removed the data-rel and kept the href and the problem with the page layering went away.

Moral of the story: if you know what page to go back to (and do not rely on the browser's history) it is better to href to the page, as there will be less conflicts.

来源：https://stackoverflow.com/questions/24221484/jquery-mobile-ui-overlay-hiding-elements