I am attempting to initialize javascript for a jQuery mobile page using the pageInit() function. I have outlined some attempts below that I can't seem to get working. Can any one tell me what I'm doing wrong. Also is there a way to do this using $(this) instead of using the pages explicit name?
pageInit.html:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.autocomplete.js"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"
type="text/javascript"></script>
<script src="functions.js"></script>
</head>
<body>
<script>
alert("script");
$(this).live('pageinit', function (event) {
//$('pageInit.html').live( 'pageinit',function(event){
//$('#pageInit').live( 'pageinit',function(event){
//$('#pageInit.html').live( 'pageinit',function(event){
alert("Page Initialized");
});
</script>
</body>
The
pageinitevent is fired on the document. It doesn't make sense to uselive, either. Instead I would usebind. For example:Take a look at the jQuery mobile documentation for more information.