我已经使用$ .mobile.changepage在我的phonegap + jquerymobile项目中进行重定向。然而，让我感到困惑的是，我需要将所有页面的脚本放在同一个文件index.html中。如果不是，则重定向页面不能在其标题中执行该功能。为什么我必须把所有脚本都放到jquery mobile的index.html中

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

然后，我的设备会重定向到的test.html这似乎是

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

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

来源

2013-04-03 Jack He

介绍

这篇文章也可以发现HERE我的博客的一部分。

jQuery Mobile的如何处理页面改变

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

第一页正常加载。它HEAD和BODY装入DOM，和他们在那里等待其他内容。当第二页被加载时，只有其内容被加载到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"> 
     // And rest of your HTML content 
     <script> 
      // Your javascript will go here 
     </script> 
    </div> 
</body>

这是一个快速解决方案，但仍一个丑陋的。

工作实例可以在我的这里其他的答案中找到：Pageshow not triggered after changepage

另一个工作示例：Page loaded differently with jQuery-mobile transition

解决方案2

把你所有的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>

最后我会介绍为什么这是一个很好的解决方案的一部分。

解决方案3

使用相对=“外部”在您的按钮，你正在使用，以改变页面元素的每。正因为如此，ajax不会用于页面加载，而且您的jQuery Mobile应用程序会像普通的Web应用程序一样运行。不幸的是，这不是一个好的解决方案。 Phonegap不应该像普通的网络应用程序一样工作。

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

正式文件，寻找一个章节：Linking without Ajax

现实的解决方案

现实的解决方案将使用解决方案2。但与解决方案2不同，我会使用相同的index.js文件并将其初始化为每个其他页面的HEAD。

现在你可以问我为什么？

Phonegap如jQuery Mobile是越野车，早晚有将是一个错误，你的应用程序将失败（包括加载DOM），如果你的每一个js的内容是一个HTML文件中。 DOM可能会被删除，并且Phonegap将刷新您当前的页面。如果该页面没有JavaScript，那么它将在重新启动之前无法运行。

最后的话

这个问题可以很容易地固定具有良好的页面架构。如果有人有兴趣，我已经写了一个关于jQuery Mobile页面架构的ARTICLE。在一个坚果外壳中，我正在讨论关于jQuery Mobile如何工作的知识，这是您在成功创建第一个应用程序之前需要知道的最重要的事情。

来源

2013-04-04 09:10:16 Gajotres

相当完美的答案！所以我们的结论是，我们不能将每个js文件分成每个页面？这使我们的应用程序真的很难保存。我担心这是否意味着一个JavaScript错误会使整个应用程序与JqueryMobile。 – 2013-04-10 07:17:51

在解决方案1中，包含外部脚本文件是否太难看？ – ogborstad 2013-04-12 10:39:32

这当然不是一个坏主意，我更喜欢将所有内容都放在外部文件中。 – Gajotres 2013-04-12 10:55:42

与普通的普通HTML页面不同，jQuery Mobile在页面之间导航时使用ajax技术。所以请确保在所有的html页面中导入所有的JS文件和库。

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

所以正如我前面所说，确保在所有的html文件中导入js文件。

而且不需要调用deviceready，使用下面的语法来调用你的页面的特定的JS功能

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

来源

2013-04-04 06:03:22

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

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

您有两种可能的体系结构，您可以将所有“页面”放在HTML页面中并从该页面导航。或者你可以有多个页面架构。你可以随时混合使用。

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

来源

2013-04-04 07:25:14 wmfairuz

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

回答

介绍