为什么我必须把所有的脚本index.html在jquery mobile [英] Why I have to put all the script to index.html in jquery mobile
问题描述
我使用$ .mobile.changepage在我的phonegap + jquerymobile项目中执行重定向。但是让我困惑的是，我需要把所有的页面的脚本放在同一个文件index.html。
例如，我的index.html似乎是
$（document）.bind（deviceready，function（）{$。mobile.changepage（test.html）;}）
然后，我的设备将重定向到test.html，似乎是
$（＃btnTest）。 function（）{alert（123）;}）
< button id =btnTest> Test< / button>
但是，脚本永远不会在test.html中执行。然后我把脚本放到index.html，我期望的是完成。无论如何，如果我把所有的脚本放在同一页，项目将变得更难和更难保存。感谢您的帮助。
简介
此处 作为一部分
如何使用jQuery Mobile处理页面更改
要理解这种情况，您需要了解jQuery移动工作。它使用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>
//其余的HTML内容
< script>
//你的javascript会在这里
< / script>
< / div>
< / body>
这是一个快速解决方案，但仍是一个难看的解决方案。
工作示例可以在我的其他答案在这里： 更改页面后未触发版式
另一个工作示例： 使用jQuery-mobile转换以不同方式加载的网页
解决方案2
将所有javascript移动到原来的第一个HTML。收集一切，并把它放在一个单一的js文件， HEAD 。在加载jQuery Mobile之后初始化它。
< head>
< meta name =viewportcontent =width = device-width; initial-scale = 1.0; maximum-scale = 1.0; minimum-scale = 1.0; user-scalable = no; target-densityDpi = device -dpi/>
< link rel =stylesheethref =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> //将你的代码放入一个新文件
< / head>
最后，我将描述为什么这是一个很好的解决方案的一部分。
解决方案3
在按钮和您使用的每个元素中使用 rel =external更改页面。因为它ajax不会用于页面加载和您的jQuery Mobile应用程序将表现得像一个普通的Web应用程序。不幸的是，这不是一个很好的解决方案在你的情况。 Phonegap永远不能作为一个普通的网络应用程序工作。
< a href =＃secondclass =ui-btn- rightrel =external>下一页< / a>
官方文档，查找一个章节 无Ajax链接
现实解决方案< h1>
现实的解决方案会使用解决方案2 。但与解决方案2不同，我将使用相同的index.js文件，并在每个可能的其他页面 HEAD
现在您可以问我为什么？
Phonegap 就像jQuery Mobile是有bug的，迟早会出现错误，如果你的每一个js内容都在一个单一的内容中，你的应用程序将失败（包括加载的DOM） HTML文件。 DOM可以删除， Phonegap 将刷新您当前的网页。
最后字词
这个问题可以很容易地用一个好的页面架构来修复。如果有人感兴趣，我写了一个 文章 关于好jQuery Mobile页面架构。在一个坚果壳我讨论的知识如何jQuery Mobile工作是你需要知道的最重要的事情，你可以成功创建你的第一个应用程序。
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.
for example, my index.html seem to be
$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})
then, my device will redirect to test.html which seem to be
$("#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.
Intro
This article can also be found HERE as a part of my blog.
How jQuery Mobile handles page changes
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM. To be more precise, even BODY is 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 BODY only first one is going to be loaded. This rule only applies to subsequent pages, if you have more pages in an initial HTML all of them will be loaded.
That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.
Here's an official documentation: 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).
Solution 1
In your second page, and every other page, move your SCRIPT tag into the BODY content, like this:
<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
Solution 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.
<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
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.
<a href="#second" class="ui-btn-right" rel="external">Next</a>
Official documentation, look for a chapter: 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 HEAD of every possible other page.
Now you can ask me WHY?
Phonegap like 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 Phonegap will refresh your current page. If that page don't have javascript that it will not work until it is restarted.
Final words
This problem can be easily fixed with a good page architecture. If anyone is interested I have wrote an ARTICLE about 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.
这篇关于为什么我必须把所有的脚本index.html在jquery mobile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
