I’m getting the following error message in jQuery Mobile:
Cannot call method ‘trigger’ of undefined
Its line 2836 in jQuery.mobile.js, which is as follows:
mpc.trigger( "beforechangepage" );
My code looks like this:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<title></title>
</head>
<body>
<!-- Application -->
<div data-role="page" id="application" data-theme="f" >
<div data-role="header">
<h1>header</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li><a href="#" data-icon="arrow-r">test1</a></li>
<li><a href="#" data-icon="arrow-r">test2</a></li>
<li><a href="#" data-icon="arrow-r">test3</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h1>footer</h1>
</div>
</div><!-- /page -->
<!-- Login -->
<div data-role="page" id="login" data-theme="f">
<div data-role="header">
<h1>header</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li><a href="#" data-icon="arrow-r">test1</a></li>
<li><a href="#" data-icon="arrow-r">test2</a></li>
<li><a href="#" data-icon="arrow-r">test3</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h1>footer</h1>
</div><!-- /content -->
</div><!-- /page -->
In app.js, I have the following code:
$(document).ready(
function () {
$.mobile.changePage( $('#login') );
})
All I get is a blank white screen and and the error I mentioned above.
Any help appreciated.
Regards,
I was in a similar situation while testing my mobile site in Safari on OS X. To resolve, I had to bind to the
pagecreateevent instead of relying solely on$(document).ready(). Everything else on the site was working without a bind topagecreateuntil I tried using$.mobile.changePage().They make this clear in their documentation, which I initially missed.