鏈接到jQuery Mobile中的外部HTML文件

我正在使用jQuery Mobile創建項目，並且嘗試鏈接單獨的HTML頁面時遇到了問題。截至目前，我有兩個單獨的HTML文件：pageInitEvent.htm和pageInitEvent2.htm。我在這兩個頁面上都有按鈕，並且在單擊時想鏈接到對方，當點擊第一頁（pageInitEvent.htm）上的按鈕時，我也會觸發一個事件（或者我希望它被觸發）。我已經使用$（document）.on（「pageinit」，「.pageinit2」，function（）{（pageInitEvent.htm文件的一部分）將此事件綁定到pageInitEvent2.htm。鏈接到jQuery Mobile中的外部HTML文件

我的問題是，如果我不會在兩個按鈕中都包含rel =「external」，它們將無法工作，只是發出錯誤，如果我將rel =「external」添加到兩個按鈕中，那麼它們鏈接正常，但事件仍然沒有得到觸發和頁面轉換，如果有任何不工作有什麼辦法鏈接2個單獨的HTML文件，而不會影響頁面轉換和使事件工作？我已經嘗試使用多頁HTML文件，它的一切都完美，它的只是當我把它們分成不同的HTML文件，所有東西都搞砸了

這裏是pageInitEve的代碼nt.htm：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Listing 4.1</title> 
    <!-- name attribute tells the browser the meta tag contains information about the viewport or the display size of the page --> 
    <!-- content attribute tells browser to display the page with the same dimensions as the device it is beign viewed on --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The jQuery Mobile CSS style sheet --> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <!-- The standard jQuery library --> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 


    <script type="text/javascript"> 
     $(document).on("mobileinit", function(){ 
      //$.extend allows to merge two objects together 
      //$.mobile is the target object to add or merge to 
      //The second argument to this function is the settings we want to change or merge to the $.mobile object 
      $.extend($.mobile, { 
       //change the message that appears when a pageLoadError happens 
       pageLoadErrorMessage: 'Either the page cannot be found or it cannot be loaded.' 
      }); 
     }); 

     //binds the pageinitevent with the page pageInit2 
     //third argument is an anonymous inner functi 
     $(document).on("pageinit", ".pageinit2", function(){ 
      alert("pageinit is bound!"); 
     }); 
    </script> 

    <!-- The jQuery Mobile library --> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

</head> 
<body> 
    <div data-role="page"> 
     <div data-role="header"><h1>pageInit event example</h1></div> 
     <div data-role="content"> 
      <p>The button below will use AJAX to load another page and trigger a bound event</p> 
      <a href="pageInitEvent2.htm" data-role="button" >Click to open a new page</a> 
     </div> 
    </div> 
</body> 
</html>

爲pageInitEvent2.htm的代碼是：

<!DOCTYPE html> 
<html> 
<head> 
<title>pageInitEvent2</title> 
    <!-- name attribute tells the browser the meta tag contains information about the viewport or the display size of the page --> 
    <!-- content attribute tells browser to display the page with the same dimensions as the device it is beign viewed on --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The JQuery Mobile CSS style sheet --> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <!-- The standard JQuery library --> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 

    <!-- The jQuery Mobile library --> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
</head> 

<body> 
    <div data-role="page" data-url="pageInitEvent2.htm" class="pageinit2"> 
     <div data-role="header"><h1>pageinit example</h1></div> 
     <div data-role="content"> 
      <p>fantastic!</p> 
      <a href="pageInitEvent.htm" data-role="button" rel="external" >Amazing, now take me back</a> 

     </div> 
    </div> 
</body> 
</html>

來源

2012-11-18 TeeJay Torres

我設法弄清楚事件綁定的解決方案。我現在只需要知道是否有任何方法不會失去動畫頁面轉換？單獨的html文件位於相同的文件夾，相同的目錄中，所以我不明白它們出了什麼問題，當單擊按鈕時出現錯誤，並彈出錯誤消息：'無法找到該頁面或無法加載該頁面。「 –

如果我只是指定文件名，即pageInitEvent2.htm，鏈接似乎不起作用。但是我認爲這很好，因爲這兩個文件都在同一個文件夾和同一個目錄中。所以我不明白這個代碼有什麼問題！ –

如果我指定文件的完整位置，則兩個按鈕都可以工作。但對於我的生活，我不明白爲什麼只是文件名是不夠的，因爲他們在同一個目錄和文件夾？此外，使用此解決方案，動畫頁面轉換仍然無效。 –

嘗試在每個的div分配唯一的ID。

<div id="pageA" data-role="page"></div> 
<div id="pageB" data-role="page"></div>

來源

2012-11-18 04:16:32 andleer

我已經這樣做了，它並沒有什麼區別，但按鈕似乎只是當我放入文件的完整位置時工作，而不僅僅是文件名。另外當我點擊按鈕時，動畫頁面轉換仍然不起作用。 –

鏈接到jQuery Mobile中的外部HTML文件

回答

相關問題