为什么我必须将所有脚本都放在 jquery mobile 中的 index.html 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15800121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why I have to put all the script to index.html in jquery mobile
提问by Hyman He
I have used $.mobile.changepage to do the redirect in my phonegap+jquerymobile projects. However what makes me confused is that I need to put the script of all the pages to the same file index.html. If not, the redirect page can not execute the function in its header.
我已经使用 $.mobile.changepage 在我的 phonegap+jquerymobile 项目中进行重定向。然而让我感到困惑的是，我需要将所有页面的脚本放到同一个文件 index.html 中。如果不是，则重定向页面无法执行其标头中的功能。
for example, my index.html seem to be
$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})
例如，我的 index.html 似乎是
$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})
then, my device will redirect to test.html which seem to be
然后，我的设备将重定向到 test.html，这似乎是
$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>
However, the script will never execute in test.html. Then I put the script to index.html, what I expect to be is done. Whatever, if I put all the script to the same page, the project will become harder and harder to be preserved. Appreciated for your help.
但是，脚本永远不会在 test.html 中执行。然后我把脚本放到 index.html 中，我期望的就完成了。无论如何，如果我将所有脚本放在同一页面上，项目将变得越来越难以保存。感谢您的帮助。
回答by Gajotres
Intro
介绍
This article can also be found HEREas a part of my blog.
这篇文章也可以在这里找到，作为我博客的一部分。
How jQuery Mobile handles page changes
jQuery Mobile 如何处理页面更改
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
要了解这种情况，您需要了解 jQuery Mobile 的工作原理。它使用ajax加载其他页面。
First page is loaded normally. Its HEADand BODYis loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODYcontent is loaded into the DOM. To be more precise, even BODYis not fully loaded. Only first div with an attribute data-role="page" will be loaded, everything else is going to be discarded. Even if you have more pages inside a BODYonly first one is going to be loaded. This rule only applies to subsequent pages, if you have more pages in an initial HTMLall of them will be loaded.
第一页正常加载。它的HEAD和BODY被加载到 中DOM，它们在那里等待其他内容。加载第二个页面时，仅将其BODY内容加载到DOM. 更准确地说，甚至BODY还没有满载。只会加载第一个具有 data-role="page" 属性的 div，其他所有内容都将被丢弃。即使您有更多页面，也BODY只有第一个页面将被加载。此规则仅适用于后续页面，如果初始HTML 中有更多页面，则所有页面都将被加载。
That's why your button is show successfully but click event is not working. Same click event whose parent HEADwas disregarded during the page transition.
这就是为什么您的按钮显示成功但单击事件不起作用的原因。HEAD在页面转换过程中忽略了父级的相同点击事件。
Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
这是官方文档：http: //jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).
不幸的是，您不会在他们的文档中找到这一点。以太他们认为这是一个常识，或者他们忘记像我的其他主题一样描述这个。（jQuery Mobile 文档很大但缺少很多东西）。
Solution 1
解决方案1
In your second page, and every other page, move your SCRIPTtag into the BODYcontent, like this:
在您的第二页和其他所有页面中，将您的SCRIPT标签移动到BODY内容中，如下所示：
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
This is a quick solution but still an ugly one.
这是一个快速的解决方案，但仍然是一个丑陋的解决方案。
Working example can be found in my other answer here: Pageshow not triggered after changepage
可以在我的其他答案中找到工作示例：更改页面后未触发页面显示
Another working example: Page loaded differently with jQuery-mobile transition
另一个工作示例：使用 jQuery-mobile 转换以不同方式加载页面
Solution 2
解决方案2
Move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded.
将您所有的 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>
In the end I will describe why this is a part of a good solution.
最后，我将描述为什么这是一个好的解决方案的一部分。
Solution 3
解决方案3
Use rel="external"in your buttons and every elements you are using to change page. Because of it ajax is not going to be used for page loading and your jQuery Mobile app will behave like a normal web application. Unfortunately this is not a good solution in your case. Phonegap should never work as a normal web app.
在按钮和用于更改页面的每个元素中使用rel="external"。因此，ajax 不会用于页面加载，您的 jQuery Mobile 应用程序将像普通的 Web 应用程序一样运行。不幸的是，这对您的情况来说不是一个好的解决方案。Phonegap 永远不应该作为一个普通的网络应用程序工作。
<a href="#second" class="ui-btn-right" rel="external">Next</a>
Official documentation, look for a chapter: Linking without Ajax
官方文档，找一章：Linking without Ajax
Realistic solution
现实的解决方案
Realistic solution would use Solution 2. But unlike solution 2, I would use that same index.js file and initialize it inside a HEADof every possible other page.
现实的解决方案将使用解决方案 2。但与解决方案 2 不同的是，我将使用相同的 index.js 文件并在HEAD每个可能的其他页面中对其进行初始化。
Now you can ask me WHY?
现在你可以问我为什么？
Phonegaplike jQuery Mobile is buggy, and sooner or later there's going to be an error and your app will fail (including loaded DOM) if your every js content is inside a single HTML file. DOM could be erased and Phonegapwill refresh your current page. If that page don't have javascript that it will not work until it is restarted.
Phonegap就像 jQuery Mobile 有问题一样，如果您的每个 js 内容都在单个 HTML 文件中，那么迟早会出现错误并且您的应用程序将失败（包括加载的 DOM）。DOM 可能会被擦除并Phonegap刷新您当前的页面。如果该页面没有 javascript，则在重新启动之前它将无法工作。
Final words
最后的话
This problem can be easily fixed with a good page architecture. If anyone is interested I have wrote an ARTICLEabout good jQuery Mobile page architecture. In a nut shell I am discussing that knowledge of how jQuery Mobile works is the most important thing you need to know before you can successfully create you first app.
这个问题可以通过良好的页面架构轻松解决。如果有人有兴趣我已经写了一篇文章谈好jQuery Mobile的页面架构。简而言之，我正在讨论有关 jQuery Mobile 工作原理的知识是您在成功创建第一个应用程序之前需要了解的最重要的事情。
回答by Jay Mayu
Unlike normal ordinary HTML pages, jQuery Mobile uses ajax technology when navigating between pages. So make sure to import all your JS files and libraries in all your html pages.
与普通的 HTML 页面不同，jQuery Mobile 在页面间导航时使用了 ajax 技术。因此，请确保在所有 html 页面中导入所有 JS 文件和库。
If you notice closely you will see that JS files from previous page is taken into consideration when loading the second page. But if you force rrefresh the current page then the js files of the current page will be effective.
如果您仔细观察，您会发现加载第二页时会考虑上一页的 JS 文件。但是如果你强制刷新当前页面，那么当前页面的js文件就会生效。
So as I said earlier make sure to import the js files in all the html files.
所以正如我之前所说，确保在所有 html 文件中导入 js 文件。
Also no need to call deviceready, use following syntax to call your page specific js functions
也无需调用deviceready，使用以下语法调用页面特定的 js 函数
$(document).on('pageshow', '#YourPageID', function(){
// Your code goes here
});
回答by wmfairuz
Jquery Mobile uses ajax to load a "page". A "page" here is a div with data-role=page. If you load a physical page index.html, you can navigate using changePage to any "page" div inside that page.
Jquery Mobile 使用 ajax 加载“页面”。这里的“页面”是一个带有 data-role=page 的 div。如果加载物理页面 index.html，则可以使用 changePage 导航到该页面内的任何“页面”div。
However, if you want to load a "page" from other physical page, jQM will only load the first "page" div from that page. What actually happen is you do not change page, jQM just load that particular "page" div using ajax and inject it to your current page.
但是，如果您想从其他物理页面加载“页面”，jQM 只会加载该页面的第一个“页面”div。实际发生的情况是您不更改页面，jQM 只是使用 ajax 加载该特定“页面”div 并将其注入当前页面。
You have two possible architecture where you put all your "pages" in a html page and navigate from there. Or you can have multiple page architecture. You can always mix this.
您有两种可能的架构，将所有“页面”放在一个 html 页面中并从那里导航。或者你可以有多个页面架构。你总是可以混合这个。
To physically change page, you need to add rel=external to your link.
要物理更改页面，您需要在链接中添加 rel=external。
