在 jQuery mobile 中，我想从外部文件加载页面容器。我可以将标记添加到我的 DOM 中，但之后我面临的问题是，一旦导航到 #page2，整个 #page1-div 就会从 DOM 中消失，因此我无法返回（请参见下面的屏幕截图）。
单击“转到第 2 页”之前的 DOM
单击“转到第 2 页”后的 DOM
正如您所看到的，整个#page1-div 已经永远消失了。这是为什么？有什么想法吗？请参阅下面我的标记和代码：
测试.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<title>Hello jqm</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$(document).on( "pagecontainerload", function( event, ui ) {
console.log('navigating to page1...');
$.mobile.pageContainer.pagecontainer("change", "#page1");
console.log('navigating done!');
} );
console.log('loading pagecontainers...');
$.mobile.pageContainer.pagecontainer("load", "page1.html");
$.mobile.pageContainer.pagecontainer("load", "page2.html");
console.log('pagecontainer-load done!');
});
</script>
</body>
</html>
第1页.html
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
<a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
</div>
</div>
page2.html
<div data-role="page" id="page2" class="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
<a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
</div>
</div>
备注：这是此问题的后续问题：jQuery mobile - 将页面拆分为不同的文件 https://stackoverflow.com/questions/25265336/jquery-mobile-splitting-up-pages-to-different-files
