Update
As per your updated question, you can't mix Single Page Model with Multi-Page Model. When you load page2.html first data-role="page
and ONLY first one is loaded. Anything else is neglected.
Example:
index.html (first page loaded) - All tags within <html>
are loaded into DOM whether Ajax is enabled or disabled.
<html>
<head>
<!-- JS, CSS, etc.. -->
</head>
<body>
<!-- pages -->
</body>
</html>
page2.html - All tags are neglected except for FIRST data-role="page"
and its' content, when Ajax is enabled.
<!-- libraries in head are neglected -->
<head>
<!-- JS, CSS, etc.. -->
</head>
<body>
<!-- ONLY first page is loaded -->
<div data-role="page">
<!-- JS -->
</div>
<!-- next pages are neglected -->
<div data-role="page">
</div>
</body>
When using Single Page Model and Ajax is enabled, you have to place JS libraries/code for the external page inside <div data-role="page">
.
<div data-role="page">
<script src="file1.js"></script>
<script src="file.js"></script>
</div>
jQuery Mobile loads external pages via Ajax, it loads ONLY first <div data-role="page">
in <body
and neglects any other tags out side page div.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…