Не понимаю, почему этот javascript не будет работать в jQm

Question

Мне кажется, что это должно работать (основываясь на ответах на другие вопросы здесь на SM), но я не получаю никаких результатов ...

Вот мой код в верхней части страницы:

Второе редактирование:

<script type="text/javascript">

        function capitalizeFirstLetter(string){
            return string.charAt(0).toUpperCase() + string.slice(1);
        }


        $(document).delegate('#sun, #mon, #tue, #wed, #thu, #fri, #sat', 'pageshow' , function() { 
            var days   = ['sun','mon','tue','wed','thu','fri','sat'],
                output = [],//create an output buffering variable
                d = new Date();
            for(var x=0; x<days.length; x++){
                //rather than manipulate the DOM every iteration of the loop we add a string of HTML to an array
                output.push('<li><a href="#' + days[x] + '">' + capitalizeFirstLetter(days[x]) + '</a></li>');
            }

            //now we add the buffered data to the listview and either refresh or initialize the widget
            var $cNav = $('#custom-navbar')
            $cNav.append(output.join(''));

            //if the listview has the `ui-listview` class then it's been initialized, and the widget needs to be refreshed, otherwise it needs to be initialized
            if ($cNav.hasClass('ui-navbar')) {
                $cNav.navbar('refresh');
            } else {
                $cNav.navbar();
            }
        });

    </script>

А вот мой код в теле:

<div data-role="content">
<div data-role="navbar" style="margin: -10px 0 15px 0;">
    <ul id="custom-navbar"></ul>
</div>

Answer 1

Что ж, с веб-сайта jQuery Mobile они напрямую рекомендуют , а не привязку к $ (document) .ready () из-за их использования некоторой магии ajax за кулисами, и вместо этого рекомендуют выполнить нечто похожее на то, что вы Вы делаете, но с Pageinit вместо PageShow. Из того, что я вижу в документации, они должны быть (для этого) функционально эквивалентны. Вы пробовали связывать pagehow или pageinit после загрузки jqm?

http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

Внимание! Используйте pageInit (), а не $ (document) .ready ()

Первое, чему вы научитесь в jQuery, это вызвать код внутри $ (document) .ready (), поэтому все будет выполнено, как только DOM загружен. Однако в jQuery Mobile Ajax используется для загрузки содержимое каждой страницы в DOM во время навигации, и DOM готов Обработчик выполняется только для первой страницы. Выполнять код всякий раз, когда Новая страница загружается и создается, вы можете привязать к событию pageinit. Это событие подробно объясняется внизу этой страницы.

Answer 2

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
    $(document).delegate('#sun', 'pageshow' , function() { 
        alert("!");
        var days   = ['sun','mon','tue','wed','thu','fri','fri','sat'],
            output = [];//create an output buffering variable
        for(var x=0; x<days.length; x++){
            alert(days[x]);

            //rather than manipulate the DOM every iteration of the loop we add a string of HTML to an array
            output.push('<li><a data-ajax="false" href="#' + days[x] + '">' + days[x] + '</a></li>');
        }

        //now we add the buffered data to the listview and either refresh or initialize the widget
        var $cNav = $('#custom-navbar')
        $cNav.append(output.join(''));

        //if the listview has the `ui-listview` class then it's been initialized, and the widget needs to be refreshed, otherwise it needs to be initialized
        if ($cNav.hasClass('ui-listview')) {
            $cNav.listview('refresh');
        } else {
            $cNav.listview();
        }
    });

</script>
<script src="../js/jquery.mobile-1.0.1.js"></script>

Поскольку этот код запускает каждое событие pageshow, вы получите несколько списков, когда пользователи перейдут на страницу, а затем вернутся на страницу. Вместо этого вы можете использовать событие pageinit: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

Обновление

Ошибка на вашей странице происходит здесь:

                $('ul#custom-navbar').append('<li/>', {
                    .append('<a/>', {
                        'href' = "#" + days[x],
                        'data-ajax' = "false",
                        'text' = days[x]
                    });
                });

Вы это видите? У вас есть дополнительный , { и вам не хватает синтаксиса, чтобы это имело смысл. Вы также используете знаки равенства, где вы должны использовать двоеточия (так как вы устанавливаете свойства объекта):

                $('ul#custom-navbar').append(
                    $('<li/>').append('<a/>', {
                        'href'      : "#" + days[x],
                        'data-ajax' : "false",
                        'text'      : days[x]
                    })
                );

Это создает элемент списка, а затем добавляет к нему ссылку с некоторыми установленными атрибутами.

Обратите внимание, что вы можете скопировать мой код, вставить его поверх кода (в своем документе), и он будет работать нормально. Я проверил это, используя мою консоль.

В общем, вы должны научиться пользоваться консолью, это поможет вам на удивление. Например, я нашел ошибку на вашей странице примерно за 30 секунд ...

Answer 3

Ну, во-первых, используйте

$('ul#custom-navbar').listview();

, а не $('ul#custom-navbar').listview('refresh');, это не будет работать, если элемент не инициализирован

Но Если вы добавили html attr data-role = "listview" на ul, то на страницах show jQM автоматически запустит просмотр списка, если это так, а затем вы добавите в него элементы,тогда вам нужно будет запустить $('ul#custom-navbar').listview('refresh'); Я рекомендую сделать это вместо этого.

Также вам нужно поместить $('ul#custom-navbar').listview(); в вашу живую функцию, как кто-то упоминал, jQM не загружается при вызове, и вы должны использовать событие pageinit, pageshowтакже срабатывает, когда вы возвращаетесь на страницу (через кнопку «Назад» и т. д.), вы не хотите запускать ее дважды.Читайте об этих двух, оптимально вы будете использовать оба для чистой обработки JS.

PS: Я рад, что вы правильно слушаете события pageinit / pageshow и не используете документ.ready, также я предлагаю запустить этих слушателей в обработчике mobileinit, например, $(document).bind("mobileinit", function(){//your pageinit/pageshow listeners here, а также функция .live устарела, используйте $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){

Answer 4

Полагаю, событие 'pageshow' имеет мобильную среду jquery.Если я прав, вы должны добавить тег jquery mobile script перед вашим скриптом.