I am working on an Phonegap jQuery mobile Android app. The app starts with the default index.html page and in it i am using $.mobile.changePage to load demo.html file. The demo.html gets loaded and displayed correctly but the javascript isn't working in it. I think i am messing up with the 'pageinit' event of jQuery Mobile or i don't know how to use it.
Here is my code :
This happens in index.html :
$.mobile.changePage("demo.html", {
transition: "slideup",
reverse: false,
changeHash: false
});
And the code for demo.html :
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$('#demo-page').live('pageinit', function(){
alert("Welcome");
});
</script>
</head>
<body>
<div data-role="page" id="demo-page" >
<div data-role="header">
<h1>Take a tour</h1>
</div>
<div data-role="content" id="demo-content">
<h2>This is the demo page.</h2>
</div>
</div>
</body>
</html>
So when the demo.html gets displayed, the 'Welcome' alert doesn't gets executed. I have no idea what is happening here.