为什么我必须把所有的脚本放到jquery mobile的index.html中

我已经使用$ .mobile.changepage做我的phonegap + jquerymobile项目中的redirect。 然而，让我困惑的是，我需要把所有页面的脚本放在同一个文件index.html中。 否则，redirect页面不能在其头部执行该function。

例如，我的index.html似乎是$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})

那么，我的设备将redirect到test.html似乎是 

 $("#btnTest").click(function(){alert("123");}) <button id="btnTest">Test</button>

但是，脚本将永远不会在test.html中执行。 然后我把这个脚本放到index.html中，我期望的就是完成了。 无论如何，如果我把所有的脚本放在同一页面上，这个项目将变得越来越难以保存。 赞赏你的帮助。

介绍

这篇文章也可以在这里find作为我的博客的一部分。

jQuery Mobile如何处理页面更改

为了理解这种情况，你需要了解jQuery Mobile是如何工作的。 它使用Ajax来加载其他页面。

第一页正常加载。 它的HEAD和BODY被加载到DOM ，并且在那里等待其他内容。 当第二页被加载时，只有它的BODY内容被加载到DOM 。 更确切地说，即使BODY没有完全加载。 只有属性data-role =“page”的第一个div才会被加载，所有其他的东西都将被丢弃。 即使您在BODY只有更多页面，也只有第一个页面将被加载。 这个规则只适用于后续的页面，如果你有更多的页面在一个初始的HTML中，所有的页面都将被加载。

这就是为什么你的button显示成功，但点击事件不起作用。 在页面转换期间忽略父HEAD相同单击事件。

这是一个官方文档： http : //jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

不幸的是，你不会在他们的文档中find这个。 以太他们认为这是一个常识，或者忘记像我的其他话题一样描述这个。 （jQuery Mobile文档很大，但缺乏很多东西）。

解决scheme1

在第二页和其他页面中，将SCRIPT标签移动到BODY内容中，如下所示： 

 <body> <div data-role="page"> // And rest of your HTML content <script> // Your javascript will go here </script> </div> </body>

这是一个快速的解决scheme，但仍然是一个丑陋的。

工作示例可以在我的其他答案中find： pageshow不会在更改页面后触发

另一个工作示例： 页面加载与jQuery-mobile转换不同

解决scheme2

将所有的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>

最后，我将描述为什么这是一个很好的解决scheme的一部分。

解决scheme3

在你的button中使用rel =“external” ，并使用你正在使用的每个元素来改变页面。 因为它的Ajax不会被用于页面加载和您的jQuery Mobile应用程序将像一个正常的Web应用程序的行为。 不幸的是，这不是一个很好的解决scheme。 Phonegap不应该作为一个正常的networking应用程序工作。 

 <a href="#second" class="ui-btn-right" rel="external">Next</a>

官方文档，查找章节： 无Ajax链接

现实的解决scheme

现实的解决scheme将使用解决scheme2 。 但不像解决scheme2，我会使用相同的index.js文件，并将其初始化在每个其他页面的HEAD中。

现在你可以问我为什么 ？

像jQuery Mobile Phonegap是越野车，迟早会有一个错误，如果你的每一个js内容是在一个单一的HTML文件内，你的应用程序将失败（包括加载的DOM）。 DOM可能会被删除， Phonegap会刷新您当前的页面。 如果该网页没有JavaScript，那么它将不会工作，直到它重新启动。

最后的话

这个问题可以通过一个好的页面结构来解决。 如果有人有兴趣，我写了关于良好的jQuery Mobile页面架构的文章。 在一个坚果壳中，我正在讨论如何在您成功地创build第一个应用程序之前，了解jQuery Mobile如何工作是您需要知道的最重要的事情。

与普通的普通HTML页面不同，jQuery Mobile在页面之间导航时使用ajax技术。 所以一定要把所有的JS文件和库导入到你所有的html页面中。

如果你仔细看，你会发现在加载第二页的时候会考虑到前一页的JS文件。 但是，如果你强制刷新当前页面，那么当前页面的js文件将是有效的。

所以正如我刚才所说，确保在所有的HTML文件中导入js文件。

也不需要调用deviceready ，使用下面的语法来调用你的页面特定的js函数 

 $(document).on('pageshow', '#YourPageID', function(){ // Your code goes here });

Jquery Mobile使用ajax来加载一个“页面”。 这里的“页面”是一个带有data-role = page的div。 如果您加载物理页面index.html，则可以使用changePage导航到该页面内的任何“页面”div。

但是，如果您想从其他物理页面加载“页面”，jQM将只加载该页面的第一个“页面”div。 实际发生的是你不改变页面，jQM只是使用ajax加载特定的“页面”div并将其注入到当前页面。

你有两种可能的架构，你把所有的“页面”放在一个html页面中并从那里导航。 或者你可以有多个页面架构。 你可以随时混合使用

要物理更改页面，您需要将rel = external添加到链接。

Interesting Posts

使用Bootstrap 3，jQuery和phonegap的移动应用程序，可以吗？

尝试构buildCordova应用程序（event.js：85）时获取“spawn cmd ENOENT”

外部资源没有被AngularJs加载

在android phonegap中单击button时退出应用程序？

从assets / www目录访问文件

如果最终使用PhoneGap，为什么要使用IBM Worklight？

phonegap应用程序可以在后台工作吗？

如何在不使用插件的情况下使用Google Analytics和PhoneGap？

离子android构build错误 – 无法find“ANDROID_HOME”环境variables

cordova cli生成项目的哪些部分可以在源代码pipe理中安全地进行版本控制？