当返回到同一页面时，它停止滚动 [英] When returning to the same page, it stops scrolling

问题描述

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

I have a dynamic page that is created to display results of data fetched from the database. When the page is created, the results are displayed fine and you have ability to scroll up/down to view the different results.

但是，如果我离开页面，然后返回，你不能再向上/向下滚动，所以它的冻结，除非你仍然可以按可见的按钮。

However, if I leave the page and then return, you can no longer scroll up/down, so it kind of freezes except you can still press the buttons that are visible.

只是提到，我使用的是JQuery手机。

Just to mention, I am using JQuery mobile.

任何人都能在这里看到问题吗？

Can anyone see the issue here?

JavaScript函数：

JavaScript Function:

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" );
                                                                                 }
}

推荐答案

I不知道jQuery手机 - 但似乎这行是罪魁祸首：

I don't know jQuery mobile at all - but it seems to as this line is the culprit:

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

当我读它 - 当你更改页面时，它添加这个锚点并返回那个位置。不知道为什么你不能滚动 - 但它可能是一个地方开始调查。

As i read it - when you change the page it adds this anchor to it and returns to that location. No idea why you cant scroll - but it might be aplace to start investigating.

这篇关于当返回到同一页面时，它停止滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！