Навигация по мобильным страницам Jquery

Я пытаюсь разработать мобильное приложение, используя Phonegap и jQuery Mobile. проблема, которая у меня есть, заключается в том, что страницы не меняются при запуске событий. Вот код страниц и 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>

Навигация не работает между страницами


cordova javascript jquery jquery-mobile
person Yazid    schedule 06.05.2014    source источник
comment
Пробовали ли вы изменить его в соответствии с рекомендациями в документации api.jquerymobile.com/jQuery.mobile.changePage   -  person Rob Schmuecker    schedule 06.05.2014
comment
как я обнаружил в документе, $.mobile.changePage устарел, и я нашел этот метод. проблема в том, что смена страницы и возврат к старой странице происходят одновременно   -  person Yazid    schedule 06.05.2014

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что ваше действие в вашей форме запускается для перезагрузки. Взгляните на эту демонстрацию http://jsfiddle.net/JuY9L/, где я изменил код форме, чтобы он возвращал пустое действие.

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