我在这里创建了一个简单的示例来说明我的问题:https://github.com/kanesee/jqm-page-state
基本上,我有 page1.html,其中有一个 id=content 的 div,我将其颜色更改为红色。
我有一个 page2.html,其中有一个 id=content 的 div,我将其颜色更改为绿色。
当我转到 page1 时,div 中文本的颜色是红色,正如预期的那样。
当我转到 page2 时,div 中文本的颜色是绿色,正如预期的那样。
我有一个从 page1 到 page2 的简单锚点 href。单击后,page2 会加载,div 内的文本也会相应更改。但文字的颜色没有改变。它是黑色的。
有人告诉我,当 ajax 处理页面导航时,页面状态保留在原始页面上下文中。因此,当我转到 page2 时,实际上仍在 page1 上,但 page2 中的部分内容已加载到 DOM 中。
我需要做什么才能解决这个问题?
有没有合适的解决办法呢?或者甚至是一个简单的,只需加载全新的第2页,就好像我用手将其输入地址栏一样?
你正在使用相同的id
对于两个页面,并且两个页面都在启用 Ajax 的同一个 DOM 内。您必须指定哪个element目标以及在哪个页面。
$("#content")
将返回 DOM 中的第一个元素,因此,您需要使用页面事件定位当前页面或您要导航到的页面内的该元素。这可以通过使用任何几乎所有页面事件.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
if (activePage.attr("data-url") == "page2.html") {
// target content within active page
// Or activePage.find("#content").css...
$("#content", activePage).css({ color : "green" });
}
});
以上是一个基本的例子;还有更先进的解决方案。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)