意外行为：JQuery Mobile页面滚动到下一页

Question

我创建了一个遇到意外行为的JQuery Mobile网络应用：当用户点击列表项时，会加载详细信息页面，但是，您可以向下滚动到详细信息页面的底部，部分列表视图显示。

以下是该项目最新版本的网址：http://jakeserver.com/Apps/BostonLandmarks/B1/index.html

动态生成详细信息页面的Javascript页面：http://jakeserver.com/Apps/BostonLandmarks/B1/landmarks.js

我猜这个问题出现在landmarks.js的createLandmarkPage()函数中。控制页面创建的2个功能如下：

function assembleLandmarkPages(landmarkList){
    $(document).ready(function(){
        var totalLandmarkHTML = "";

        for(var i = 0; i < landmarkList.length; i++)
        {
            //console.log(landmarkList[i]);
            totalLandmarkHTML += createLandmarkPage(landmarkList[i]);
        }

        //console.log(totalLandmarkHTML);
        document.getElementById("nationalLandmarksApp").innerHTML += totalLandmarkHTML;
        //console.log(document.body.innerHTML);
    });
}

function createLandmarkPage(landmark){
    //console.log("Assembling Pages");

    var landmarkPageHTML = "";
    landmarkPageHTML += '<section id="' + landmark.landmarkLink.substring(1, landmark.landmarkLink.length) + '" data-role="page" class="ui-page ui-page-theme-a ui-page-header-fixed">';
    landmarkPageHTML += '<header data-role="header" data-position="fixed" data-id="appHeader">';
    landmarkPageHTML += '<a href="#landmarks" data-transition="slide" data-direction="reverse" data-icon="arrow-l" data-rel="back">Back</a>';
    landmarkPageHTML += '<h1>' + landmark.landmarkName + '</h1></header><div data-role="content">';

    //Location
    landmarkPageHTML += '<p><span class="sectionTitle">Location: </span>' + landmark.landmarkStreetAddress + '</p>';

    //Description
    landmarkPageHTML += '<p><span class="sectionTitle">Description: </span>' + landmark.landmarkDescription + '</p>';

    //Photo of Landmark
    landmarkPageHTML += '<img src="' + landmark.landmarkPhoto + '" class="sectionPhoto"><br/>';

    /*NEED TO IMPLEMENT MAPPING API BELOW AS THIS IS JUST A PICTURE*/
    //Map of Landmark
    landmarkPageHTML += '<img src="mapDemo.gif" class="sectionPhoto">';

    landmarkPageHTML += '<div id="map"></div>';
    landmarkPageHTML += '</div><div class="bottomNotSelectedTabBar"></div></section>';

    console.log(landmarkPageHTML);
    return landmarkPageHTML;
}

问题截图：

有什么想法吗？