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

Problems loading page with jQuery's pageinit

本文关键字：问题 jQuery pageinit 加载 使用      更新时间：2023-09-26

我正在使用jQuery Mobile的"pageinit"为移动设备编写脚本来加载我的脚本。我正在使用 EJS 作为我的视图模板。我使用 jQuery 的 data-role="page" 创建了两个页面。第一页是动态创建的教室列表。我将一个事件侦听器附加到每个列表项，将您带到第 2 页，这是该教室学生的列表。为了获取学生数据，我根据给定的教室 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作为我的选择器。我尝试刷新列表视图。我还尝试了几种不同的方法来尝试使用回调在正确的时间将信息加载到页面。我发现了几个类似的例子，他们把ajax调用的代码放在不同或单独的pageinit/pageshow/pagechange调用中的解决方案总是使教室列表中的eventListeners不再工作。

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

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");
        }
    });
}
相关文章：