为什么我的 jQuery Mobile 脚本只能在第一页上运行？
- Barbara Streisand原创
- 2024-11-12 03:34:02188浏览
闻起来像 DOM...
最常见的 jQuery Mobile 问题之一是 “为什么我必须将所有脚本放入 index.html” 。您会发现其中的一些答案包含的噪音多于事实。这个问题将向您详细解释 jQuery Mobile 是如何工作的，以及为什么如果您忘记包含它们，您的脚本将无法工作。
jQuery Mobile 如何处理页面更改
要了解这一点您需要了解 jQuery Mobile 的工作原理。它使用ajax加载其他页面。
第一页正常加载。它的 HEAD 和 BODY 被加载到 DOM 中，它们在那里等待其他内容。加载第二个页面时，仅将其 BODY 内容加载到 DOM 中。更准确地说，即使是BODY也没有满载。只有第一个具有 data-role="page" 属性的 div 才会被加载，其他所有内容都将被丢弃。即使 BODY 中有更多页面，也只会加载第一个页面。此规则仅适用于后续页面，如果您在初始 HTML 中有更多页面，则所有页面都将被加载。
这就是为什么您的按钮显示成功但单击事件不起作用。相同的点击事件，其父 HEAD 在页面转换期间被忽略。
解决方案 1
在第二个页面和所有其他页面中，移动您的 SCRIPT 标记到 BODY 内容中，如下所示：
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
这是一个快速的解决方案，但仍然是一个丑陋的解决方案。
工作示例可以在我的这里的其他答案：页面更改后未触发Pageshow
另一个工作示例：使用 jQuery 移动转换以不同方式加载页面
解决方案 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 脚本只能在第一页上运行？的详细内容。更多信息请关注PHP中文网其他相关文章！