简介
本文也可以在我的博客这里找到。
jQuery Mobile如何处理页面变化
要理解这种情况,您需要了解jQuery Mobile的工作原理。它使用ajax加载其他页面。
第一页正常加载。它的HEAD
和BODY
被加载到DOM
中,等待其他内容。当加载第二个页面时,仅其BODY
内容被加载到DOM
中。更准确地说,即使BODY
并没有完全加载。只有带有属性data-role="page"的第一个div将被加载,其他所有内容都将被丢弃。即使在BODY
中有更多的页面,也只会加载第一个页面。此规则仅适用于后续页面,如果在初始HTML中有更多页面,则所有这些页面都将被加载。
这就是为什么您的按钮能够成功显示,但单击事件无法正常工作的原因。相同的单击事件,其父级HEAD
在页面切换期间被忽略了。
这是官方文档:http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
不幸的是,您不会在他们的文档中找到这个描述。他们可能认为这是常识,或者他们忘记描述这一点,就像我的其他主题一样。(jQuery Mobile文档很大,但缺少很多东西。)
解决方案1
在第二个页面和每个其他页面中,将您的SCRIPT
标签移动到BODY
内容中,如下所示:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
</script>
</div>
</body>
这是一个快速解决方案,但还是有些丑陋。
可以在我的另一个回答中找到实际工作示例:changepage 后 pageshow 未触发
另一个有效的示例:使用 jQuery Mobile 过渡加载页面的不同方式
解决方案2
将所有 JavaScript 移动到原始的第一个 HTML 中。收集所有内容并将其放入单个 JS 文件中,放入HEAD
中。在 jQuery Mobile 已加载后初始化它。
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script> // Put your code into a new file
</head>
最后我会解释为什么这是一个好的解决方案的一部分。
解决方案3
在你的按钮和每个用于页面跳转的元素中使用rel="external"。因为这样就不会使用ajax进行页面加载,你的jQuery Mobile应用程序将表现得像一个普通的Web应用程序。不幸的是,在你的情况下这不是一个好的解决方案。Phonegap 绝不能像一个普通的Web应用程序一样工作。
<a href="#second" class="ui-btn-right" rel="external">Next</a>
官方文档,请查找章节:无需使用Ajax进行链接
现实解决方案
现实解决方案将使用解决方案2。但不同于方案2,我会使用同一个index.js文件,并将其初始化到每个可能的其他页面的HEAD
中。
现在你可以问我为什么?
Phonegap
和jQuery Mobile一样存在漏洞,迟早会出现错误,如果所有js内容都包含在一个HTML文件中,则您的应用程序将失败(包括已加载的DOM)。DOM可能会被删除,Phonegap
将重新加载您当前的页面。如果该页面没有javascript,它将不起作用,直到重新启动。
最后的话
可以通过良好的页面架构轻松解决此问题。如果有人感兴趣,我写了一篇有关良好的jQuery Mobile页面架构的文章。简而言之,我讨论了在成功创建您的第一个应用程序之前,了解jQuery Mobile工作原理的知识是您需要知道的最重要的事情。