Navigasi halaman seluler Jquery

Saya mencoba mengembangkan aplikasi seluler menggunakan Phonegap dan jQuery Mobile. masalah yang saya miliki adalah halaman tidak berubah ketika peristiwa dipicu. Berikut ini kode halaman dan jQuery:

<div id="deviceready" data-role="page">
    <div data-role="header">Header</div>
    <div role="main" class="ui-content">
        <form>
            <label for="username">User name:</label>
            <input name="username" id="username" value="" type="text">
            <label for="password">User name:</label>
            <input name="password" id="password" value="" type="password">
            <button id="submit-login" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-user">Login</button>
        </form>
    </div>
    <div data-role="footer">Footer</div>
</div>
<div id="formResults" data-role="page">
    <div data-role="header">Header</div>
    <div>Hello from success</div>
    <div data-role="footer">Footer</div>
</div>
<script type="text/javascript">
    $('#submit-login').click(function() {
        $(':mobile-pagecontainer').pagecontainer('change', '#formResults', {
            reload: true
        });
    });
</script>

Navigasi tidak berfungsi antar halaman


cordova javascript jquery jquery-mobile
person Yazid    schedule 06.05.2014    source sumber
comment
Sudahkah Anda mencoba mengubahnya seperti yang direkomendasikan dalam dokumentasi api.jquerymobile.com/jQuery.mobile.changePage   -  person Rob Schmuecker    schedule 06.05.2014
comment
seperti yang saya temukan di dokumen, $.mobile.changePage tidak digunakan lagi, dan saya telah menemukan metode ini. masalahnya adalah halaman itu berubah dan kembali ke halaman lama dalam waktu yang bersamaan   -  person Yazid    schedule 06.05.2014

Jawaban (1)


arrow_upward
1
arrow_downward

Saya pikir tindakan Anda di formulir Anda dipicu untuk memuat ulang sendiri. Lihat Demo ini http://jsfiddle.net/JuY9L/ Di mana saya telah mengubah kode formulir sehingga mengembalikan tindakan kosong.

HTML:

<div id="deviceready" data-role="page">
    <div data-role="header">Header</div>
    <div role="main" class="ui-content">
        <form action="javascript:void(0);">
            <label for="username">User name:</label>
            <input name="username" id="username" value="" type="text" />
            <label for="password">User name:</label>
            <input name="password" id="password" value="" type="password" />
            <button id="submit-login" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-user">Login</button>
        </form>
    </div>
    <div data-role="footer">Footer</div>
</div>
<div id="formResults" data-role="page">
    <div data-role="header">Header</div>
    <div>Hello from success</div>
    <div data-role="footer">Footer</div>
</div>
person Rob Schmuecker    schedule 06.05.2014