JQuery的手机 – $ .mobile.changepage不加载外部.JS文件

所以我很难得到$.mobile.changePage正常工作。我这样称呼它：

 $.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );

但由于某种原因，当加载HTML页面时，没有任何外部的.js文件（我写的文件实际上是做什么的）都包含在内。我正在遵循重要的加载约定

 -Jquery -(CUSTOM JS) -Jquery Mobile

有谁知道为什么这不是正确加载？此外，页面展示function也没有被解雇，这很奇怪。它看起来像这样：

 $("div[data-role*='page']").live('pageshow', function(event, ui) { loadFormFields(); });

现在页面被渲染，但是没有任何function性的事情发生。如果我砍了，做这样的事情：

 document.location.href="DataformsM-AddRecord.html";

它会正常工作…

任何帮助将不胜感激。：）谢谢

jQuery Mobile并没有将整个页面放到dom中，而是抓取了第一个 data-role="page"元素及其后代，并将其拖入当前的dom中。

因此，文档的<head>中的任何脚本都不会包含在内。

我通常把我的网站的所有function的JavaScript放在索引页上，然后当外部页面被加载到dom时，他们可以从已经加载的脚本中受益。

另外，您可以将JavaScript代码放入data-role="page"元素中，当jQuery Mobile执行其页面的AJAX加载时，它将包含在内。

UPDATE

一个好的系统是把所有的JS放到包含文件中，并将其包含在网站的每个页面上。如果页面被AJAX引入到DOM中，它将被忽略，但是如果有人在你的网站的某个地方刷新，那么JS将可用。

所以build立起贾斯珀如此明智地提到的，我提出了一个工作的解决scheme。

基本上，我把所有的JS和CSS文件加载到索引页面开始。现在，当你加载，这个方法将被触发为pageshow

 $("div[id*='page1']").live('pageshow', function(event, ui) { setTimeout(function() { window.scrollTo(0, 1) }, 100); doStuffWhenPageintializes(); });

一旦我调用$.mobile.changePage( "someOtherPage.html", { transition: "slide"} ); pagehide方法将被激发为page1对象。这是您可以触发该方法初始化您正在过渡到的页面的位置。

 $("div[id*='page1']").live('pagehide', function(event, ui) { setTimeout(function() { window.scrollTo(0, 1) }, 100); loadStuffForNewPage(); });

现在，您可以删除document.location.href="external.html"行，并简单地使用本机JQM调用。希望这有助于一些人。

请重复每个HTML页面中的所有脚本的头部分，因为更改页面将导致重新加载页面，并将重新创build头部分…

这样一个简单的更改页面就可以工作：

 $.mobile.changePage('abc.html', { transition: 'slide' });

似乎没有JQM提供的加载外部html文件的“正确”方式。感谢Jasper提供的解决scheme。

如果我们想切换到外部页面，JQMbuild议重新加载AJAX，如：

 <a href="foo.html" rel="external">

要么

 <a href="foo.html" data-ajax="false">

我尝试了两个，但他们没有工作 – 我是本地应用程序的编程，所以也许它可能适用于networking应用程序？

我解决了这个问题，把脚本放在最后加载的页面的头部，这个页面对我有帮助和帮助。 JQM没有获取DOM中最近加载的页面的头部，所以没有引入最近页面的JS内容。通过把所有的脚本放在一个外部的JS文件中，或者把它放在第一页的头部可能会为你做诡计。

我也在寻找这个解决scheme来加载外部页面的“正确方法”。不过，我同意，你的破解确实有效。现在我将采取破解：

  $(document).ready(function(){ $("#page1").bind('ended', function(){ $.mobile.changePage($(document.location.href="external.html"), 'fade'); }); });