我在这里创建了一个简单示例来说明我的问题:https://github.com/kanesee/jqm-page-state
基本上,我有 page1.html,它有一个 id=content 的 div,我将它的颜色更改为红色。 我有一个 page2.html,它有一个 id=content 的 div,我将它的颜色更改为绿色。
当我转到 page1 时,div 中的文本颜色如预期的那样为红色。 当我转到 page2 时,div 中文本的颜色是绿色的,正如预期的那样。
我有一个从第 1 页到第 2 页的简单 anchor href。单击它后,page2 加载并且 div 内的文本相应更改。但文字的颜色没有改变。它是黑色的。
有人告诉我,当 ajax 处理页面导航时,页面状态保留在原始页面上下文中。因此,当我转到 page2 时,我实际上仍在 page1 上,但 page2 中的部分内容已加载到 DOM 中。
我需要做什么来解决这个问题?
是否有合适的解决方案?或者甚至是一个简单的加载页面 2 的全新页面,就好像我在地址栏中手动输入它一样?
最佳答案
您正在为两个页面使用相同的 id
,并且两个页面都在同一个 DOM 中,因为启用了 Ajax。您必须指定要定位哪个元素以及在哪个页面中。
$("#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" });
}
});
以上是一个基本的例子;还有更高级的解决方案。
关于javascript - jQuerymobile 页面更改后无法访问元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24235047/