我已經使用$ .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中

回答

介紹