0

我正在使用 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 作为我的选择器。我试过刷新列表视图。我还尝试了几种不同的方法来尝试使用回调在正确的时间将信息加载到页面。我发现了几个与此问题类似的示例，他们将 ajax 调用的代码放在不同或单独的 pageinit/pageshow/pagechange 调用中的解决方案总是使教室列表中的 eventListeners 不再起作用。

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

4

1 回答 1

0 
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");
        }
    });
}
于 2013-09-08T11:30:43.600 回答