CODEWITHSUNDEEP
jquerycordovajquery-mobile
nida
nida

Reputation: 656

$.mobile.changePage not changing page?

here is 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 the code which is 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 over here change page is not working all references of jquery and cordova is already added using cordova 2.0.0 and jquery 1.7.1

Upvotes: 0

Views: 273

Answers (1)

Omar
Omar

Reputation: 31732

Remove click events out of pageinit event. pageinit fires once only on page initialization, afterwards, any event attached to it will be 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);
});

Demo

Upvotes: 1

Related Questions