So I have 2 pages example page1.html and page2.html. there is a href link in from page1 to page2. But it seems that the javascript in page2.html are ignored and not called. (tried document ready, body onload did not work)
So does jquery mobile only accept the javascripts on the first page?
How do you run the javascript after the page2.html is called?
New to jquery mobile thanks.
sample code on page2.html similar to page 1:
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/imageresize.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
<script src="js/jquery.-1.10.1.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
defaultPageTransition:'none'
});
});
</script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<body>
HELLO WORLD
</body>
<script>
$(function() {
alert('testing js');
});
</script>
So I have 2 pages example page1.html and page2.html. there is a href link in from page1 to page2. But it seems that the javascript in page2.html are ignored and not called. (tried document ready, body onload did not work)
So does jquery mobile only accept the javascripts on the first page?
How do you run the javascript after the page2.html is called?
New to jquery mobile thanks.
sample code on page2.html similar to page 1:
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/imageresize.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
<script src="js/jquery.-1.10.1.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
defaultPageTransition:'none'
});
});
</script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<body>
HELLO WORLD
</body>
<script>
$(function() {
alert('testing js');
});
</script>
- Can you share a bit of your html and code so far? It makes it easier for us to debug. – JanR Commented Jul 24, 2013 at 4:15
- I tried the single html with multiple pages div, well it works with on pageshow but still want to know how to do this in separate htmls since I like to keep htmls within a number of lines and not a single page with thousands of line which will be harder to find and debug in the future – jhdj Commented Jul 24, 2013 at 4:47
4 Answers
Reset to default 5Everything you need to know about this problem can be found here: Why I have to put all the script to index.html in jquery mobile
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.
Here's an official documentation: http://jquerymobile./demos/1.2.0/docs/pages/page-links.html
Unfortunately you are not going to find this described in their documentation. Ether they think this is a mon knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).
Based on the code you have posted:
Make sure you include:
<script src="js/jquery.mobile-1.3.1.min.js"></script>
Before:
<script>
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
defaultPageTransition:'none'
});
});
</script>
As I am sure mobileinit is part of the jquery-mobile framework.
Secondly I would strongly suggest using the directed page structure as per the jquery-mobile documentation.
One added advantage of using multiple divs(pages) in one document is that the user will not have to reload all the javascript/css on each page request which minimizes the amount of bandwidth used as well as the performance of your page.
Make sure you include required jquery lib and also u can also try another jquery mobile events..
Page transitions are used to animate the change from the current active page (fromPage) to a new page (toPage). Events are triggered before and after these transitions so that observers can be notified whenever pages are shown or hidden. The events triggered are as follows:
pagebeforeshow
You should include the jquery file in each html file using script tag as follows
<script type="text/javascript" language="javascript" src="jquery-1.6.3.min.js"></script>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745135224a4613167.html
评论列表（0条）