正確使用版本1.7.1中的jQuery Mobile事件處理

我在我的智慧結束與jQuery Mobile事件。我不明白他們，儘管按照T的文檔。我使用下面的代碼來初始化我的網頁。問題是有些似乎會多次觸發，偶爾當我回到頁面時，什麼也不會出現，就好像.live pageinit根本不會觸發。我很困惑。 pageinit是要走的路嗎？是最好的實踐？我是否需要自己清理並使用諸如頁面隱藏之類的東西來從DOM中刪除內容？請幫助我理解。謝謝！正確使用版本1.7.1中的jQuery Mobile事件處理

// page number 1 
<header> 
    includes and stuff 
<header> 
<body> 
    <div data-role="page" data-theme="a" id="dashboardPage"> 
     $('#dashboardPage').live('pageinit',function() { 

     }); 

     // somewhere in here a page transition to anotherPage.html (not necessarily the id of the new page in the <div data-role-"page data-theme...> declaration 

     $.mobile.changePage("anotherPage.html",{transition : "slide"}); 

    </div> 
</body> 

// page number 2 
<header> 
    includes and stuff 
<header> 
<body> 
    <div data-role="page" data-theme="a" id="specialsPage"> 
     $('#specialsPage').live('pageinit',function() { 

     }); 
    </div> 
</body>

來源

2012-09-04 Mobie

你可以嘗試這樣的事：

<html> 
    <header> 
     <!-- BASIC INCLUDES --> 
     <link rel="stylesheet" href="./css/jquery.structure-1.1.0.min.css" /> 
     <link rel="stylesheet" href="./css/jquery.mobile-1.1.0.min.css" /> 
     <link rel="stylesheet" href="./css/jquery.mobile.theme-1.1.0.min.css" /> 

     <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="./js/jquery.mobile-1.1.0.min.js"></script> 
     <!-- END - BASIC INCLUDES --> 

    </header> 
    <body> 
     <!-- PAGE 1 --> 
     <div data-role="page" data-theme="a" id="dashboardPage"> 
      <script> 
       // INITIALIGE PAGE 1 - dashboardPage 
       $("#dashboardPage").live('pageinit',function(event){ 
        alert('"initializing" page 1: dashboardPage'); 
       }); 
      </script> 

      HERE YOU ARE AT PAGE 1 (dashboardPage)!!!<br><br> 
      <a href="#specialsPage" data-transition="pop">CLICK HERE TO GO TO PAGE 2 (specialsPage)</a> 
     </div> 

     <!-- PAGE 2 --> 
     <div data-role="page" data-theme="a" id="specialsPage"> 
      <script> 
       // INITIALIGE PAGE 2 - specialsPage 
       $("#specialsPage").live('pageinit',function(event){ 
        alert('"initializing" page 2: specialsPage'); 
       }); 
      </script> 

      HERE YOU ARE AT PAGE 2 (specialsPage)!!!<br><br> 
      <a href="#dashboardPage" data-transition="slide">CLICK HERE TO GO TO PAGE 1 (dashboardPage)</a> 
     </div> 
    </body> 
</html>

希望它能幫助。

來源

2012-09-04 09:40:46 Littm

當使用JQuery移動時，你應該考慮你有一個頁面的內容是動態更新的。你不會像往常一樣從一個頁面導航到另一個頁面。因此，任何使用JQM導航到的頁面中的代碼都會被忽略（tyr更改頁碼2的頁眉，並使用changepage導航到第1頁的此頁面，您將看不到任何區別）。因此，您的所有js代碼應該可以直接在您的用戶將到達的頁面中使用。

如果您在頁面1的腳本中添加了以下代碼，那麼您將會在頁面2加載更改頁面時，先檢測到頁面2的初始化。

$("#specialsPage").live('pageinit',function(event){ 
       alert('"initializing" page 2: specialsPage'); 
});

要記住一個重要的事情是，你的用戶也可以直接訪問您的第2頁，這意味着所有的代碼應該也正因爲如此，我會強烈建議包括所有的代碼可供2頁。在所有頁面的標題中引用的js文件中，而不是直接在頁面中的腳本標記中。

來源

2012-09-05 16:22:01 Romain

你如何做一個通用的包含文件？我可以把所有的JavaScript包括在裏面以及我的CSS包括？可能不會，對吧... – Mobie

您可以在首頁的標題中包含CSS和js文件的所有鏈接。從那裏通過jquerymobile瀏覽的任何頁面都將從中受益。 – Romain

這不涉及刷新.. – Mobie

正確使用版本1.7.1中的jQuery Mobile事件處理

回答

相關問題