更新

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。从我在文档中看到的它们应该是（为此）在功能上等同。在加载jqm后，您是否尝试过绑定pageshow或pageinit ？

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

我猜'pageshow'事件是jquery移动框架。如果我是对的，那么你应该在脚本之前添加jquery mobile script标签。

Answer 4

首先使用

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

不$('ul#custom-navbar').listview('refresh');如果元素未初始化，这将无效

但是如果你在ul上添加了html attr data-role =“listview”，那么on pageshow jQM会自动初始化listview，如果是，然后你添加了元素，那么你需要运行$('ul#custom-navbar').listview('refresh');我建议你这样做。

你需要像你提到的其他人一样将$('ul#custom-navbar').listview();放在你的实时函数中，当你调用它时不会加载jQM，你应该使用pageinit事件，pageshow当您导航回页面时（通过后退按钮等）也会触发，您不想初始化它两次。阅读这两个，最好的是你要用它们来干净地处理JS。

PS：我很高兴您正在正确收听pageinit / pageshow事件而不使用document.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){

不明白为什么这个javascript在jQm中不起作用

4 个答案:

更新