jQuery mobile -loading dynamic pages
Question
I have an index.html page that loads jquery and jquery mobile libraries (latest versions) with links to two other pages.
<a href="page2.html" class="ui-state-persist" id='some_id' data-role="button" data-theme="e" >Page2</a>
<a href="page3.html" class="ui-state-persist" id='some_id' data-role="button" data-theme="e" >Page3</a>
Is it possible to include custom javascript files in page 2 and 3? If I include them like this page2.html renders properly, but js file seems to be ignored. The goal of this is to distibute the wait time in loading javascript between the main menu and application pages.
page2.html:
<!DOCTYPE html>
<html>
<head>
<title>My Apptitle>
<meta charset="utf-8"/>
<!-- custom files and libraries -->
<script src="../js/mycode.js"></script>
</head>
<body>
<div data-role="page" id="preTktTab">
<div data-role="header" data-position="inline">
<!-- and so on -->
1 answers
solution1
0 2011-11-15 18:40:58
Here is an explanation I gave to someone about a very similar question: jQueryMobile page events not firing when navigating to a different html page
Basically when you navigate to page in the jQuery Mobile framework, the framework pulls the page into the DOM via AJAX. When it does this, it only grabs the HTML within the first <div data-role="page"> element on the page and ignores the rest of the page. So if you want to load JavaScript on these page-views then you need to add the <script> tags inside the <div data-role="page"> element.
For example, change:
<html>
<head>
<script src="..." type="text/javascript"></script>
</head>
<body>
<div data-role="page">
...mobile page here...
</div>
</body>
</html>
To:
<html>
<head>
</head>
<body>
<div data-role="page">
<script src="..." type="text/javascript"></script>
...mobile page here...
</div>
</body>
</html>
Here is some good reading on the subject (notice the "Known Limitations" at the bottom of the page): http://jquerymobile.com/demos/1.0rc3/docs/pages/page-navmodel.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.