Can't get pageinit to work (despite reading doc + forums)
I know a lot of people have asked similar questions, but there must be something I haven't grasped yet...
I took the helloworld.html example provided in the tutorial and added a response to the pageInit event. Here are some of the calls I tried, all in vain:
<script> $(document).live("pageInit", function(event) {alert ("inside pageinit");}); </script>
or
<script> $(document).bind("pageInit", function(event) {alert ("inside pageinit");}); </script>
or
<script> $(document).on("pageInit", function(event) {alert ("inside pageinit");}); </script>
or
<script> $(body).live("pageInit", function(event) {alert ("inside pageinit");}); </script>
or
<script> $(body).bind("pageInit", function(event) {alert ("inside pageinit");}); </script>
or
<script> $(body).on("pageInit", function(event) {alert ("inside pageinit");}); </script>
I tried changing double quotes to single quotes...
Here's the full code of the page:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
<script> $(document).bind('pageInit', function(event) {alert ('inside pageInit');}); </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
<form>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
</form>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>