1

我在这里创建了一个简单的示例来说明我的问题：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 中。

我需要做些什么来解决这个问题？

有合适的解决方案吗？或者甚至是一个简单的，只是加载全新的 page2，就好像我手动将它输入到我的地址栏中一样？

4

1 回答 1

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" });
   }
});

以上是一个基本的例子；还有更高级的解决方案。

于 2014-06-15T23:59:16.567 回答