jQuerymobile页面更改后无法访问元素 [英] can't access elements after jQuerymobile page change

问题描述

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

I created a simple example to illustrate my problem here: https://github.com/kanesee/jqm-page-state

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

Basically, I have page1.html, which has a div with id=content and I change its color to red. I have a page2.html, which has a div with id=content and I change its color to green.

当我转到第1页时，div中的文本颜色是红色，与预期的一样. 当我转到page2时，div中的文本颜色如预期的那样是绿色.

When I go to page1, the color of the text in the div is red, as expected. When I go to page2, the color of the text in the div is green, as expected.

我有一个简单的锚href，从page1转到page2.单击它后，将加载page2，并且div中的文本也会相应更改.但是文字的颜色没有改变.是黑色的.

I have a simple anchor href from page1 that goes to page2. After clicking it, page2 loads and the text inside the div changes accordingly. But the color of the text is unchanged. It's black.

有人告诉我，当ajax处理页面导航时，页面状态仍保留在原始页面上下文中.因此，当我转到page2时，我实际上仍然在page1上，但是page2中的部分内容已加载到DOM中.

I've been told that when ajax handles page navigation, the page state remains in the original pages context. So when I go to page2, I'm actually still on page1 but part of the content in page2 is loaded into the DOM.

该怎么办才能解决这个问题?

What do I need to do to get around this?

有适当的解决方案吗?甚至只是一个简单的页面，它完全是全新加载的page2，就像我手动将其输入到地址栏中一样?

Is there a proper solution? Or even a simple one that just loads page2 entirely brand new as if I typed it into my address bar by hand?

推荐答案

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

You are using the same id for both pages and both pages are inside the same DOM as Ajax is enabled. You have to specify which element to target and in which page.

$("#content")将返回DOM中的第一个元素，因此，您需要使用 page事件将当前页面或您要导航到的页面中的该元素作为目标.这可以通过使用几乎所有的 page事件 来实现.

$("#content") will return first element in DOM, hence, you need to use page events to target that element inside current page or the page you're about to navigate to. This can be achieve by using any almost all page events.

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

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

The above is a basic example; there are more advanced solutions.

这篇关于jQuerymobile页面更改后无法访问元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！