將外部Html合併到jQuery Mobile頁面

我正在嘗試將一個外部HTML源代碼動態合併到一個jQuery移動頁面中。我能夠成功地合併外部html，但它看起來像普通的HTML（即不是受jQuery手機影響的Html）。任何人都可以提出我可能做錯了什麼？將外部Html合併到jQuery Mobile頁面

主HTML：

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" 
    /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $("#main").load('externalHtml.html'); 
      //$("#main").append('externalHtml.html'); 
      //$("#main").load('externalHtml.html #contain'); 
      //$("#main").page(); 
     }); 
    </script> 
</head> 

<body> 
    <div data-role="content"> 
     <div id="main"></div>Main Page</div> 
</body>

externalHtml.html：

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script> 
     <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
</head> 
<body> 
external html 
<div data-role="content" id="contain"> 
<input type="search" name="name" id="name" value="" /> 
</div> 
     </body> 
     </html>

來源

2012-08-02 Ben Pearce

如果.trigger('create')容器元素上，jQuery Mobile的自動初始化中的任何部件容器。例如：

$("#main").load('externalHtml.html').trigger('create');

他們真的應該記錄這更好的，但如果你看看在每個類型的widget的API事件，你會看到有關create事件的文檔。

此外，閱讀此頁的文件的頂部：http://jquerymobile.com/demos/1.1.1/docs/api/events.html

你不應該使用document.ready，而是應該結合pageinit事件僞頁面。使用document.ready將來很可能會讓您頭痛。

- 更新 -

你可能會想打電話.trigger('create')在回調使外部HTML已經嘗試初始化之前加載：

$("#main").load('externalHtml.html', function() { 
    $(this).trigger('create'); 
});

來源

2012-08-02 21:54:52 Jasper

偉大的工作，謝謝！ – 2012-08-02 22:48:47

不錯！但如何更新網址哈希？ – Magico 2013-06-10 13:48:36

@Magico您可以使用'window.location.hash ='some-hash';'來更新URL，或者在現代瀏覽器中，您可以使用pushState API來更新哈希值以外的URL。 – Jasper 2013-06-10 14:53:03

將外部Html合併到jQuery Mobile頁面

回答

相關問題