Question

我创建了一个动态页面来显示从数据库中获取的数据的结果。创建页面时，结果显示正常，您可以向上/向下滚动以查看不同的结果。

但是，如果我离开页面然后返回，则无法再向上/向下滚动，因此它会冻结，除非您仍然可以按下可见的按钮。

提一下，我正在使用JQuery mobile。

有人能在这看到这个问题吗？

JavaScript功能：

function fetchEvent() {
   db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2 * 1024 * 1024);
   db.transaction(function(tx) {
   var TitleT = document.getElementById("texttitle").value;
   tx.executeSql("SELECT * FROM SoccerEvents WHERE Title LIKE '%" + TitleT + "%'", [], successCBValue, errorCB);
         });
 function successCBValue(tx, response, page_id) {
    var formElements = "<table id='resulttable' data-role='table' data-mode='reflow' class='ui-responsive table-stroke table-stripe'><thead><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr></thead><tbody>";
     for (var i = 0; i < response.rows.length; i++) {
     formElements += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location +"</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date +"</td><td>" + response.rows.item(i).Description + "<button data-rowtitle='" + response.rows.item(i).Title + "' data-mini='true' class='btnJoin'>Join</button></td></tr>";
      }
    formElements+="</tbody></table>";
     $('#page_body').append('<div data-role="page" data-theme="d" id="' + page_id + '"><div data-role="content">' + formElements + '<a href="#page4" data-role="button" data-mini="true">Return</a></div></div>');
     $.mobile.initializePage();
     $.mobile.changePage("#" + page_id);
     $(document).on("click", ".btnJoin", function(e){
        var title = $(this).data("rowtitle");
        updateEvent(title)
     });
   }
}

 function updateEvent(title) {
         db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2 * 1024 * 1024);
         db.transaction(function(tx) {
         tx.executeSql("Update soccerevents SET NoPeople  = NoPeople +1 WHERE Title = '" + title + "'", [], successJoin,errorCB);
              });
         function successJoin() {
         navigator.notification.alert("You have joined the event!", null, "Information", "ok");
         $( ":mobile-pagecontainer" ).pagecontainer( "change", "#page4" );
                                                                                 }
}

Answer 1

我根本不知道jQuery mobile - 但似乎这条线是罪魁祸首：

 $.mobile.changePage("#" + page_id);

正如我读到的那样 - 当您更改页面时，它会将此锚点添加到该页面并返回到该位置。不知道为什么你不能滚动 - 但它可能是一个开始调查的地方。

返回同一页面时，它会停止滚动

1 个答案: