jquery - $.mobile.changePage not changing page? -
here html code:
<div data-role="page" id="mainmenu"> <div data-role="header"> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" style="margin-top:50%; margin-left:20%;"> <li id="prayerid" data-theme="b"><a href="#"><img src="css/images/namazimage.jpg" />prayers </a> </li> <li id="goalid" data-theme="e"><a href="#"><img src="css/images/namazimage.jpg" />goal </a> </li> </ul> </div> </div> <!-- //////////////////////// prayer page start ////////////////////////////////////// --> <div data-role="page" id="prayer"> <div data-role="header" data-theme="b"></div> <div data-role="content"></div> <div data-role="footer" data-theme="e" data-position="fixed"> <div data-role="navbar"> <ul> <li id="namazid"><a href="#" data-role="tab" data-icon="grid">namaz</a></li> <li id="fastid"><a href="#" data-role="tab" data-icon="grid">fast</a></li> </ul> </div> </div> </div> <!-- //////////////////////// prayer page end ////////////////////////////////////// -->
this s code written in separate js file:
$('#mainmenu').live('pageinit', function() { $('#prayerid').off('click').on('click', function() { alert("prayer id"); $.mobile.changepage("#prayer", null, true, true); //$.mobile.changepage('#loginpage', null, true, true); }); }); $('#prayer').live('pageinit',function() { alert("prayer page"); $('#namazid').off('click').on('click', function() { alert("namaz page"); //$.mobile.changepage('#mainmenu', null, true, true); $.mobile.changepage('#namazpage', null, true, true); }); });
but on here change page not working references of jquery , cordova added using cordova 2.0.0 , jquery 1.7.1
remove click
events out of pageinit
event. pageinit
fires once on page initialization, afterwards, event attached neglected.
$('#prayerid').off('click').on('click', function () { alert("prayer id"); $.mobile.changepage("#prayer", null, true, true); }); $('#namazid').off('click').on('click', function () { alert("namaz page"); $.mobile.changepage('#namazpage', null, true, true); });