Question

我使用此代码显示一周的讲座概述。这是一个列表视图，它是根据传递给网页的week_id使用网址中的q变量填充的，例如/week.html?q=32

页面的页脚有两个按钮，用于导航到上一周/下周，即同一页面。使用

更新/week.html?q=

$("#week_prev").attr("href", '/week.html?q='+ weeknumber_prev);
$("#week_next").attr("href", '/week.html?q='+ weeknumber_next);
$("#text_week").text(week_id);

当我使用pageshow事件监听器时，此代码完美无瑕。

现在我更喜欢使用pagebeforeshow事件监听器，因为在转换开始之前会更新页面。由于某些原因，在使用pagebeforeshow事件时，页脚href和text未更新，但列表视图为。当我使用alert()

检查时，变量存在且有效

非常感谢任何帮助。

的Javascript

    // Get dynamic data for specified week
    //
    // this is working:
    // $(document).on('pageshow','#onderwijs_week', function(e, data){
    //
    // this isn't
    $(document).on('pagebeforeshow', "#onderwijs_week", function (event, data) {
        var parameters = $(this).data("url").split("?")[1];
        var week_id = parameters.replace("q=","");      
        //var week_id = getUrlVars()['q'];  

        $.getJSON("/json.php",{
                section: "onderwijs",
                query: week_id
            }, 

        function(json){
                    var mydate = new Date();
                    weeknumber_next = parseInt(week_id) + 1;
                    weeknumber_prev = parseInt(week_id) - 1;
                    week_id = "Week " + week_id;
                    if (json.onderwijs) {
                        $("#week_list").empty();
                        $.each(json.onderwijs,function(i,item){
                            date2check = new Date(item.date);
                            if (areSameDate(mydate, date2check)){
                                $("#week_list").append('<li data-role="list-divider" role="heading" data-theme="e">'+item.datum+
                                                '</li><li data-theme="e">'+
                                                '<h5 class="no-ellipsis"><strong>'+item.title +'</strong></h5>'+
                                                '<p>'+item.speaker+'</p>'+
                                                '<p class="ui-li-aside"><strong>'+item.time+'</strong></p></li>');
                                week_id = "Deze Week";
                            } else {
                            $("#week_list").append('<li data-role="list-divider" role="heading">'+item.datum+
                                                '</li><li>'+
                                                '<h5 class="no-ellipses"><strong>'+item.title +'</strong></h5>'+
                                                '<p>'+item.speaker+'</p>'+
                                                '<p class="ui-li-aside"><strong>'+item.time+'</strong></p></li>');
                            }
                         });
                         //
                         // This is the part failing using pagebeforechange and is working using pageshow
                         $("#week_prev").attr("href", '/week.html?q='+ weeknumber_prev);
                         $("#week_next").attr("href", '/week.html?q='+ weeknumber_next);
                         $("#text_week").text(week_id);

                        } else {
                        $("#week_list").empty();
                            $("#week_list").append('<li data-role="list-divider" role="heading">'+week_id+' 2013'+
                                                '</li><li>'+
                                                '<h5><strong>Nog geen programma bekend</strong></h5>'+
                                                '<p>Dit wordt meestal ca 2 weken voor het begin van de maand gepubliceerd</p></li>');
                         $("#week_prev").attr("data-rel", "back");
                         $("#week_next").remove();
                         $("#text_week").text(week_id);
                        }
                        $("#week_list").listview('refresh');
            });

    });

HTML

    <html>
    <head>
    </head>
    <body>
    <!-- Begin Page -->
    <div data-role="page" id="onderwijs_week" data-theme="c">
      <div data-role="header" data-id="navbar" data-position="fixed" data-theme="f">
      <a href="#main_panel" data-icon="bars" data-iconpos="notext" class="ui-btn-left" data-transition="slide">Panel</a>
        <h1>Onderwijs</h1>
        <a href="/colofon.html" data-icon="info" data-iconpos="notext" class="ui-btn-right" data-transition="fade">Colofon</a>
      </div>
      <div data-role="content">
      <ul data-role="listview" id="week_list" data-dividertheme="c"></ul>
      </div>
      <div data-role="footer" data-position="fixed" data-id="footer" data-theme="c" id="week_footer">
      <a id="week_prev" href="" data-role="button" data-icon="arrow-l" class="ui-btn-left" data-iconpos="notext" data-transition="slide" data-direction="reverse">Vorige</a><h1 id="text_week"></h1><a id="week_next" href="" data-role="button" data-icon="arrow-r" class="ui-btn-right" data-iconpos="notext" data-transition="slide">Volgende</a>
      </div>

      <div data-role="panel" id="main_panel" data-position="left" data-display="reveal">
      <ul data-role="listview" data-divider-theme="a">
        <li data-role="list-divider" role="heading">Hoofdmenu</li>
        <li><a href="/home.html" data-transition="slide">Home</a></li>
        <li><a href="/content/mp/" data-transition="slide">Medische protocollen</a></li>
        <li><a href="#main_panel">Onderwijs</a></li>

        <li><a href="/onderzoek.html">Onderzoek</a></li>
        </ul>
    </div>
      </div>
    </body>
    </html>

$（）。attr无法处理pagebeforeshow事件

0 个答案: