将外部Html合并到jQuery移动页面中_Html_Jquery Mobile_Load_External_Inject

将外部Html合并到jQuery移动页面中

html jquery-mobile

将外部Html合并到jQuery移动页面中,html,jquery-mobile,load,external,inject,Html,Jquery Mobile,Load,External,Inject,我正在尝试将html的外部源动态合并到jQuery移动页面中。我能够成功地合并外部html，但它看起来像常规html（即，不是受jQuery mobile影响的html）。有人能告诉我我做错了什么吗主Html： <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="tex

我正在尝试将html的外部源动态合并到jQuery移动页面中。我能够成功地合并外部html，但它看起来像常规html（即，不是受jQuery mobile影响的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>
    <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>


$（文档）.ready（函数（）{
$（“#main”）.load（'externalHtml.html'）；
//$（“#main”）.append（'externalHtml.html'）；
//$（“#main”）.load（'externalHtml.html#contain'）；
//$（“#主页”）.page（）；
});
主页

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>


外部html

如果您在container元素上触发（'create'），jQuery Mobile将自动初始化容器中的任何小部件。例如：

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

他们确实应该更好地记录这一点，但是如果您查看每种类型小部件的API事件，您将看到关于

create

事件的文档

另外，请阅读本页文档的顶部：

您不应该使用

document.ready

，而应该绑定到伪页面的

pageinit

事件。使用

document.ready

很可能会让您将来头疼

--更新--

您可能希望在回调中调用

.trigger（'create'）

，以便在尝试初始化外部HTML之前加载它：

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

@Magico您可以使用

window.location.hash='somehash'

更新URL，或者在现代浏览器中，可以使用pushState API更新哈希之外的URL。