jquery mobile - 页面不刷新答案

【问题标题】：jquery mobile - page doesn't refreshjquery mobile - 页面不刷新
【发布时间】：2012-12-11 21:44:31
【问题描述】：

我有 3 页：

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

但在所有这些转换过程中，页面会失去其样式。

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

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

【问题讨论】：

没有看到代码，你希望别人怎么知道？
@Priya 我看过你的页面，你说的是哪种风格？并且您没有通过 jqm 附加任何动态内容，因此 .listview('refresh') 和 .trigger('create');不需要。

标签： html css jquery-mobile

【解决方案1】：

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

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

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

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

【讨论】：

赞成解释您如何解决自己的问题。 S.O. 周围有很多问题。是自我回答的，但缺乏明确的解释。做得很好。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我不确定您使用什么逻辑导航到 page2 或 page3

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

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

【讨论】：

仍然页面没有得到样式。
Hello priya .. 请让我知道您在哪里（在哪个页面上）添加了 css（样式表）文件或样式标签。或者你能分享一些演示链接吗？？
你可以在我的问题部分看到演示页面 >> 我有 3 页：第 1 页、第 2 页、第 3 页。第 1、2、3 页是链接。

【解决方案4】：

当您使用 pageChange 时，将对那个 url 发出一个 Ajax 请求，并且它只会加载带有 data-role="page" 的 div 内的内容。因此，您从该元素中获得的所有内容都将被忽略（JS 和 CSS）。

【讨论】：