需要在jQuery Mobile中刷新页面

Question

我遇到了一些关于jquery mobile的问题。当我从第一页转到第二页时，它没有像应该显示的那样显示第二页，我需要每次刷新页面。似乎最初缺少一些CSS类。我不明白为什么会发生这种情况。

我正在使用CSS：http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css JS：http://code.jquery.com/jquery-1.6.4.min.js和http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js。

在同一页上，我有这个锚标签。

<a href="" onClick="showText()">showText</a>

showText()方法第一次不调用，显示javascript错误showText未定义，但当我刷新页面时它正常工作。

- Harry

---

你需要添加更多信息：这是两个单独的HTML文件还是多页或动态生成的页面？你是如何调用第二个页面的？你是通过编程方式调用changePage，还是点击链接？也许需要添加更多代码。 - frequent

Answer 1

关于showText():

您需要了解JQM的工作方式。为了启用转换等功能，JQM会将页面拉入并放置在DOM中。您从第一个页面（类似于您的基础页面）开始，该页面已经加载完全。 包括所有的.js/.css文件和增强内容。

当您加载第二个页面时，JQM仅获取data-role="page" id="your-2nd-page"内部的内容，并在第一个页面之后将其添加到DOM中! 所有该div标记外部的脚本以及第二个页面头部中的所有.css和.js文件都不会被JQM获取。

所以，如果您的showtext()函数位于第二个页面的页内div之外或者是仅在第二个页面中使用的.js文件中，则它将不会被获取和注入到DOM中，因此您的函数无法正常工作。

当您刷新第二个页面时，第二个页面将成为完全增强的基础页面，因此第二个页面上的所有脚本都将被加载，但是如果您加载第一个页面，则第一个页面上的所有脚本将无法工作。

解决方法: 我将所有的css/scripts都放在所有页面中。这样无论用户从哪里开始，都会加载所需的所有内容。

- frequent

---

谢谢您的帮助，它解决了我问题的一半。我正在使用header.jsp文件，我的所有css和js文件都在其中。我将我的javascript代码移动到了header.jsp文件中，并将所有的css和js文件移动到了各自的页面中。现在我的javascript正常工作，但第二个页面仍然无法正确加载。我为所有页面只使用了一个css文件。这是问题所在吗？根据您之前的问题，这是两个不同的html页面。 - Harry

一个CSS文件没有问题。你说的“加载不正确”是什么意思？它在DOM中吗？它有一个.ui-page-active的类吗？到底哪里出了问题？ - frequent

我的 .css 文件里面没有 .ui-page-active 类。在第二个页面中，有一个 div 标签，它具有 data-role="content" 和 id="cContainer"，并且还自动向此 div 标签添加了两个属性，即 class="ui-content" 和 role="main"，并且还在我的 div 标签内添加了两个带有一些 css 类的 div 标签。因此，当我刷新页面时，它会显示灰色背景颜色，这正是我想要的。当我第一次加载页面时，它不会显示该背景颜色。 - Harry

嗯，我只能猜测 - 你可以尝试将 data-theme="c" 添加到你的内容 div 中，明确告诉 JQM 你想要灰色背景。你也可以使用 Firebug 检查“错误”的页面上哪个 CSS 设置了错误的背景。也许你在自己的 CSS 中覆盖了它。希望这有所帮助。 - frequent

Answer 2

这不是一个解决方案，但它解决了我的问题。

通过使用表单提交而不是锚链接，我成功地防止了缓存页面的加载。

<!-- <a href="index.php?p=6_2"  data-role="none"><img src="images/large_red_arrow.png" /></a> -->
<form action="index.php?p=6_2" method="post" data-ajax="false">
    <input data-role="none" id="view-button" value="view" name="view" type="image" src="images/large_red_arrow.png" alt="View"/>
</form>

- latenitecoder