Jquerymobile – $ .mobile.changepage
我想从我的.js文件打开.html文件。 所以我使用$ .mobile.changePage（“file.html”）。 在file.html中有file.js. 但file.js在调用file.html时不会调用。
提前致谢。
first.js
$.mobile.changePage ("file.html"); file.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery Mobile Framework - Dialog Example</title> <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" /> <script src="jquery-1.4.4.min.js"></script> <script src="jquery.mobile-1.0a2.min.js"></script> <script src="../Scripts/file.js"/> // Could not imported <script src="../Scripts/helperArrays.js"/> // Could not imported <script src="../Scripts/globalVariables.js"/> // Could not imported </head> <body> <div data-role="page"> <div data-role="header" data-nobackbtn="true"> <h1>Vaults</h1> </div> <!-- <div data-role="content" data-theme="c" id="contentVault"> <a href="Views/searchPage.html" data-role="button" data-theme="b">Sample Vault</a> <a href="Views/searchPage.html" data-role="button" data-theme="c">My Vault</a> </div> --> <div data-role="content" id="content"> <ul id="listview" data-role="listview" data-inset="true" data-theme="e" data-dividertheme="b"> <li id="listdiv" data-role="list-divider">List of Items</li> </ul> </div><!-- /content --> </div> </body> </html>
请帮帮我..
Jquery mobile通过AJAX获取页面，并将其内容添加到当前页面。 我看到了一些有关将页面标题更改为传入页面的通知，因此他们正在（计划）访问头部，但目前jquery mobile在加载页面时似乎不会加载外部js。
更重要的是，如果你使用$（document）.ready（），它将不会被触发，因为它是AJAX
当jQM通过AJAX加载另外一个页面时，它只会在你的div中引入任何东西[data-role =“page”]而没有别的东西，比如头
所以你可以，如果你想，在这个div中包含任何JS / CSS，问题是如果这个页面被多次访问，任何CSS都会积累，但是这个问题对于JS来说更糟糕。
基本上每一个页面都会附加到DOM上，所以如果使用像$（'div.someClass'）这样的全局select器，那么JS就会运行在整个DOM上（每个页面加载的），甚至使用ID也不是一个完美的解决scheme，因为如果你可以链接到同一页面两次。
对于较小的站点
我已经通过将所有CSS移动到一个文件中解决了这个问题，并且为了每次页面加载时我想运行的JS代码，我绑定到pageinit和pageshow jQM事件：
<script type="text/javascript"> $("div:jqmData(role='page'):last").bind('pageinit', function(){ //your code here - $.mobile.activePage not declared }); $("div:jqmData(role='page'):last").bind('pageshow', function(){ //your code here - $.mobile.activePage works now }); </script>
pageinit事件在页面加载时运行，只有一次（加载之后，如果返回到内存，即使通过后退button，也不会再次触发），页面显示每次页面触发即使您通过浏览器上的后退button导航回来，也是如此。
pageinit在DOM出现的时候运行，pageshow事件只有当你有一些依赖于被渲染的DOM的代码时，你需要通过$ .mobile.activePage快速引用到活动页面，或者你需要改变一些数据每次显示时刷新一次。 对于大多数目的，我只使用pageinit作为document.ready用于jQM，并在那里绑定我的事件。 对静态元素使用bind，而不是对dynamic元素进行实时生效，因为实况事件在文档根目录下侦听，所以您希望在页面div上侦听。
对于较大的站点
对于大型网站来说，将活动事件绑定到任何页面和处理页面types是有优势的，这样js代码就不会被加载多次。
如果你有外部的js文件和辅助函数，那么你只需要把它放在所有页面的头部（如果没有太多的话），如果你有一个非常大的网站，你可以通过跟踪哪个JS文件已经加载了服务器端。
所有这一切都可以通过不使用AJAX加载新页面来避免，所以请考虑一下这种转换/加载效果是否值得
* 以下是我如何处理大型jQM网站：*
- 将活动事件绑定到所有页面/对话框pageinit和pageshow事件：
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
- 我参考每个页面的名称：
<div data-role="page" data-mypage="employeelist"> -
在这个实况事件中，你可以基本上为每个页面“name”设置一个switch语句，然后检查pageinit / pageshow或者两者的event.type并把你的代码放在那里，然后每次创build/显示一个页面时，这个事件将被触发它知道哪个页面触发了它，然后调用相应的代码
-
我最终有太多的代码，所以我build立了一个处理程序对象，其中每个页面的js都包含在一个单独的js文件中，并且可以向活动事件注册处理程序
缺点是，你的整个网站的所有js加载到用户到达的第一页，但缩小了，即使是一个大的网站比jQuery或jQM小，所以这不应该是一个问题。 优点是每当用户导航到新页面时，您不再通过AJAX加载每个页面的所有JS。
*注意：现在RequireJS可以使这更容易pipe理
