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.

Just to mention, I am using JQuery mobile.

Can anyone see the issue here?

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

回答1:

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.

来源：https://stackoverflow.com/questions/36424120/when-returning-to-the-same-page-it-stops-scrolling

标签

javascript

jquery

html

cordova

jquery-mobile