在index.html中加载about.htm片段,代码如下:
index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script type="text/javascript">
$(document).on("pageinit",function(){
$("#aid").on("tap",function(){
$("#c").load("about.htm");
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>顶部</h1>
<a href="#left" class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all"></a>
</div>
<div id="c" role="main" class="ui-content" data-dom-cache="true">
<a id="aid" href="#" class="ui-btn">加载片段</a>
</div>
<div data-role="footer"><h1>底部</h1></div>
<div id="left" data-role="panel">
<ul data-role="listview">
<li><a href="#">menu 1</a> </li>
<li><a href="#">menu 2</a> </li>
</ul>
</div>
</div>
</body>
</html>
about.htm:
<ul data-role="listview">
<li><a href="#">haha</a> </li>
<li><a href="#">lala</a> </li>
</ul>
效果图为:
加载前:
加载后未达到效果,如下:
任何情况下都无效,还是加载时无效?