Приложение Phonegap (+ jquery mobile) отлично работает в браузере, но не на устройстве

У меня есть очень простое тестовое мобильное приложение phonegap + jquery. Это простая форма. Код ниже:

    <!-- Styles -->
    <link type="text/css" rel="stylesheet" href="jquery-ui-mobile/jquery.mobile-1.3.1.min.css">

    <!-- jQuery and jQuery Mobile -->
    <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
    <script src="jquery-ui-mobile/jquery.mobile-1.3.1.min.js"></script>

    <!-- Extra Codiqa features -->
    <script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>

    <!-- Socket.IO -->
    <script src="socket.io/socket.io.js"></script>

</head>
<body>

    <div data-role="page" id="page1">
            <div id="register_button" data-role="button" data-transition="slide">
                Register
            </div>
    </div>
</body>

<script>
    $(document).on('pageinit','[data-role=page]',function(){
        $('#register_button').click(function(){
            $('#error_message_label').text('E-mail not set.');
            $('#error_message').show();
        });
    });
</script>

<!--<script src="js/user/register.js"></script>-->

The script seems not to be working on the device. Nothing happens when I click the button.


cordova jquery jquery-mobile jquery-mobile-button
person Jacek Kwiecień    schedule 27.05.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Это должно работать:

  1. Переместите блок скрипта внутрь div страницы, например:

    <div data-role="page" id="page1">
    <div id="register_button" data-role="button" data-transition="slide">
        Register
    </div>
    <script>
        $(document).on('pageinit','[data-role="page"]',function(){
            $('#register_button').click(function(){
                $('#error_message_label').text('E-mail not set.');
                $('#error_message').show();
            });
        });
    </script>            
</div>

  2. Также измените обработку кликов, чтобы окончательный код выглядел так:

    <div data-role="page" id="page1">
    <div id="register_button" data-role="button" data-transition="slide">
        Register
    </div>
    <script>
        $(document).on('pageinit','[data-role="page"]',function(){
            $(document).on('click','#register_button', function(){
                $('#error_message_label').text('E-mail not set.');
                $('#error_message').show();
            });
        });
    </script>            
</div>

ИЗМЕНИТЬ:

Почему это должно быть внутри div страницы, было просто догадкой. Вы не объяснили, как работает ваше приложение, поэтому это заставляет меня задуматься. У jQuery Mobile есть одна распространенная проблема, о которой люди обычно не знают, она просто не описана в официальной документации. Если вы используете несколько файлов HTML, только первый файл HTML будет полностью загружен в DOM, каждая вторая страница будет загружать только div страницы, а jQuery Mobile отбросит все остальное. Подробнее об этом читайте здесь.

Другой возможностью была проблема с событием клика. Проблема в том, что иногда событие щелчка, если платформа работает медленно, не будет привязано к правильному объекту. Вот почему я использовал привязку делегированного клика. Он привяжет событие щелчка к документу, а затем распространит его на правильный элемент. По сути, не имеет значения, существует ли элемент в DOM или нет, потому что этот тип привязки заботится только об объекте документа.

person Gajotres    schedule 27.05.2013
comment
Я добавил описание к своему ответу. Проверьте это и спросите, есть ли у вас еще вопросы. - person Gajotres; 27.05.2013
comment
@Gajotres: Как-то задокументирована проблема с привязкой кликов? У меня аналогичная проблема с приложением HTML5/phonegap. click() не работает, а on(click, function()) работает... заранее спасибо. - person Mich Dart; 24.06.2014

arrow_upward
0
arrow_downward

Попробуйте следующий код:

$(document).ready(function(){
    $('#register_button').on.('click',function(){
            $('#error_message_label').text('E-mail not set.');
            $('#error_message').show();
    });
}
person theowi    schedule 27.05.2013