Question

我创建了一个简单的示例来说明我的问题：https://github.com/kanesee/jqm-page-state

基本上，我有page1.html，它有一个id = content的div，我把它的颜色改成红色。我有一个page2.html，它有一个id = content的div，我将它的颜色改为绿色。

当我转到page1时，div中文本的颜色为红色，如预期的那样。当我转到第2页时，div中文本的颜色为绿色，如预期的那样。

我有一个来自page1的简单锚点href转到第2页。单击它后，页面2加载，div内的文本相应更改。但是文本的颜色没有变化。它是黑色的。

我被告知，当ajax处理页面导航时，页面状态仍保留在原始页面上下文中。因此，当我转到第2页时，我实际上仍然在第1页上，但第2页中的部分内容已加载到DOM中。

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

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

Answer 1

您对两个页面使用相同的id，并且两个页面都在启用Ajax的同一DOM内。您必须指定要定位的元素以及在哪个页面中。

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

以上是一个基本的例子;有更先进的解决方案。

可以在jQuery移动页面更改后访问元素

1 个答案: