Question

我正在使用jQuery Mobile的“pageinit”编写一个移动脚本来加载我的脚本。我正在使用EJS作为我的视图模板。我使用jQuery的data-role =“page”创建了两个页面。第一页是动态创建的教室列表。我为每个列表项附加了一个事件监听器，它将您带到第二页，这是一个教室学生的列表。为了获得学生数据，我根据给定的教室ID进行ajax调用。这种方式有效。

我的问题是重启应用程序后第一次加载学生数据的第一次和第一次;从ajax调用发回的数据不会加载到列表中。我已经测试过它是在成功的ajax调用时发送警报的。我正在使用“pageinit”来加载脚本。

这是我正在使用的EJS文件的基本结构：

  <body>
   <div data-role="page" id="classroomMaster">
       <div data-role="header">
           <-- some navigation elements -->
       </div>

       <div data-role="content">

           <-----*this is a dynamically created clickable list, which I set 
                    an eventListener for in the first part of my script* ----->

           <% for(var i=0; i<classRooms.length; i++) { %>
               <li id=<%= classRooms[i].ID %> >
                    <a href="" data-ajax="false"><%= classRooms[i].ID %></a>                    
               </li>
           <% } %>  
       </div>   
   </div>

   <div data-role="page" id="studentList">

       <div data-role="content" id="students">
            <% if(typeof studentRecords != 'undefined') { %>

           <-----*studentRecords is not defined initially, after a classRoom link from
                  the first page is selected an ajax call is made to return the studentRecords objects* ------------>

                 <ul data-role="listview">
                     <% for(var i=0; i<studentRecords.length; i++) { %>
                         <li id=<%= studentRecords[i].ID %> >
                              <a href=""><%= studentRecords[i].ID %></a>
                         </li>
                     <% } %>    
                 </ul>
            <% } %>
      </div>
   </div>
 </body>

这是我正在使用的脚本

var currentList;
var elementID;
var id;

$( document ).on( "pageinit", '#mowingmaster', function( event ) {

    $('li').each(function(index) {

        var elementID = $(this).attr('id');
        elementID = '#' + elementID;

        $(function() {      
            $(elementID).click(function(event) {

                var elementID = $(this).attr('id');
                id = elementID;
                elementID = '#' + elementID;

                setElementID(id);
                $.mobile.changePage("#dailylist");
            });
        });
    });

    $( "#dailylist" ).on( "pagebeforeshow", function( event, ui) { 
        $("#testhide").hide()
        setCurrentList(elementID);
    });

    $( "#dailylist" ).on( "pageshow", function( event, ui ) {
        //Do nothing
    });
});

function setElementID(id) {
    id = id;
}

function setCurrentList() {
    var currentList = id;

    $.ajax({
        type:"POST",
        url:"/scape/mowinglist",
        data: {currentList : currentList},
        success: function(data) {
            alert(JSON.stringify(data, null, 4));
            $("#testlist").listview("refresh");
        }
    });
};

此问题仅在重新启动应用程序后第一次加载页面时发生。我已经尝试了Jquery加载页面的不同方式的每种组合（pageshow，pagechange，更多），还尝试将文档和页面ID作为我的选择器。我试过刷新listview。我还尝试了几种不同的方法来尝试使用回调来在正确的时间将信息加载到页面。我发现了一些与此问题类似的示例，他们将ajax调用的代码放在不同或单独的pageinit / pageshow / pagechange调用中的解决方案总是使得教室列表中的eventListeners不再起作用。

如果需要任何其他代码或信息，我会在这里。感谢您抽出宝贵时间阅读本文。非常感谢您提供的任何建议，信息或帮助。我是自学的，所以对我的代码的任何建议都表示赞赏。

Answer 1

var currentList;
var elementID;
var id;

$( document ).on( "pageinit", '#classroomMaster', function( event ) {

    $('li').each(function(index) {

        var elementID = $(this).attr('id');
        elementID = '#' + elementID;


        $(elementID).click(function(event) {

            var elementID = $(this).attr('id');
            id = elementID;
            elementID = '#' + elementID;

            setElementID(id);
            $.mobile.changePage("#dailylist");
        });
    });

    $( "#dailylist" ).on( "pagebeforeshow", function( event, ui) { 
        $("#testhide").hide()
        setCurrentList(elementID);
    });

    $( "#dailylist" ).on( "pageshow", function( event, ui ) {
        //Do nothing
    });
});

function setElementID(id) {
    id = id;
}

function setCurrentList(id) {
    var currentList = id;

    $.ajax({
        type:"POST",
        url:"/scape/mowinglist",
        data: {currentList : currentList},
        success: function(data) {
            alert(JSON.stringify(data, null, 4));
            $("#testlist").listview("refresh");
        }
    });
}

使用jQuery pageinit加载页面时出现问题

1 个答案: