Question

我有3页：

点击第1页上的“过滤器”按钮，它会转到第2页。单击第2页上的“灰色按钮”将转到第3页。单击第2页上的“红色按钮”将返回第1页。

但在所有这些过渡期间，页面都会失去风格。

我尝试在第1页上添加此代码，但似乎效果不佳：

$(document).bind('pagechange', function() {
          $('.ui-page-active .ui-listview').listview('refresh');
          $('.ui-page-active :jqmData(role=content)').trigger('create');
        });

Answer 1

似乎当用户点击jQuery Mobile驱动的网站中的链接时，导航系统的默认行为是使用该链接的href来制定Ajax请求（而不是允许浏览器的默认链接行为请求带有整页加载的href）。

这意味着当通过Ajax加载页面时，引用页面头部的任何脚本和样式都不会产生任何影响，但如果通过HTTP正常请求页面，它们将执行。

所以我尝试整合样式，并在每个页面的头部引用相同的样式表和脚本集。这解决了这个问题。

http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

Answer 2

如果您使用Windows 8导航，当您导航到另一个页面时，将加载新页面css，如果任何css选择器具有相同名称，则新css将有效。当你回来时，你可能会失去这种风格。

尝试为每个页面和子页面使用css名称空间： https://www.google.com.br/search?q=css+namespace

Answer 3

我不确定您使用哪种逻辑导航到page2或page3

您可以尝试使用changePage功能导航到不同的页面..

    $.mobile.changePage("page2.html", { allowSamePageTransition: true, 
transition: "slide", reloadPage: true });

Answer 4

使用pageChange时，将对该URL发出Ajax请求，并且只会使用data-role =“page”加载div内的内容。所以你对这个元素的所有东西都会被忽略（JS和CSS）。

jquery mobile - 页面不刷新

4 个答案: