jQuery移动更改页面上点击动态创建列表(数据来自JSON)

我是编程新手，在编辑js脚本以使事情正常工作方面获得了一些帮助。

使用:jquery.mobile-1.4.5。

我想实现这个格式(4级):

1. 主要分类->网格按钮布局
2. 一级子类-> listview(使用JSON动态创建)
3. 第二级子类别-> listview(使用JSON动态创建)
4. 第三级详细信息->基本html显示*一些第一级类别可能没有第二级类别，将直接跳转到显示第三级详细信息

目前，我设法使主要类别和第一级子类别按要求显示。但是，我不能让第一级列表视图正确显示第二级列表视图。

var info = [
    //main categories: display as grid buttons
    {"id": 0, "parent": null, "policyName": "0", "policyImg": "img/1.png",}, 
    {"id": 1, "parent": null, "policyName": "1", "policyImg": "img/2.png",},
    //parent: display as 1st level catagories listview
    {"id": 8, "parent": 0, "policyName": "8", }, 
    {"id": 9, "parent": 0, "policyName": "9", }, 
    {"id": 10, "parent": 0, "policyName": "10",}, 
    //parent: display as 2nd level catagories listview
    {"id": 11, "parent": 8, "policyName": "11", "policyURL":"#",}, 
    {"id": 12, "parent": 8, "policyName": "12", "policyURL":"#",}, 
];

jQuery Mobile Script (UPDATED):

//first page
$(document).on("pageinit", "#policy-page", function () {
    var div = "";
    $.each(info, function (i, info) {
        if(info.parent == null) {
            grids = ['a','b','c','d'];
            div += '<div class="ui-block-' + grids[i%4] + '"><div class="ui-bar" style="text-align: center;"><a href="#" id="' + i + '" class="info-go ui-link ui-btn ui-shadow ui-corner-all" role="button"><img src=" ' + info.policyImg + ' " /><br />' + info.policyName + '</a></div></div>';
        }
    });
    $("#policy-grid").append(div).promise().done(function () {
        $(this).on("click", ".info-go", function (e) {
            e.preventDefault();
            $("#policy-subpage").data("info", info[this.id]);
            $.mobile.changePage("#policy-subpage");
        });
        //add refresh style function
    });
});
//second page
$(document).on("pagebeforeshow", "#policy-subpage", function () {
    var info_sub = $(this).data("info");
    var id = info_sub.id;
    var html = "";
    $.each(info, function (i, info) {
            if (id == info.parent) {
                li =  $('<li><a href="#" id="' + i + '">' + info.policyName + '</a></li>');
                li.on("click", function(e){
                        e.preventDefault();
                        alert($(this).text());
                        $("#policy-subpage2").data("info_sub2", info[this.id]);
                        $.mobile.changePage("#policy-subpage2");
                });
                $("#policy-list").append(li).promise().done(function () {
                    $(this).listview("refresh");
                });
            }
        });[![enter image description here][1]][1]
//third page
// var info_sub2 shows undefined
$(document).on("pagebeforeshow", "#policy-subpage2", function () {
    alert($(this).attr('id'));
    var info_sub2 = $(this).data("info_sub");
    var id2 = info_sub2.id;
    var html = "";
    $.each(info, function (i, info) {
        if (id2 == info.parent) {
            html += '<li><a href="#" id="' + i + '">' + info.policyName + '</a></li>';
        }
    });
    $("#policy-list2").empty();
    if (html != ""){
        $("#policy-list2").append(html);
    }
    else {
        $("#policy-list2").append("<li>No item is found.</li>");
    }
    $("#policy-list2").listview("refresh");
});

HTML(完成):

<div data-role="page" data-theme="a" id="policy-page">
        <div data-role="header">
            <a href="javascript:window.location.href='index.html';" class="transparentButton" data-icon="arrow-l" data-iconpos="notext"></a>
            <a href="javascript:window.location.href='index.html';" class="transparentButton" data-icon="home" data-iconpos="notext"></a>
            <h1>Policy</h1>
        </div>
        <div data-role="content">
            <div class="ui-grid-c" id="policy-grid">
            </div>
        </div>
    </div>
    <!--second page --> 
    <div data-role="page" id="policy-subpage">
        <div data-role="header" data-theme="b">
            <a href="#" data-rel="back" data-role="button" class="transparentButton" data-icon="arrow-l" data-iconpos="notext"></a>
            <a href="javascript:window.location.href='index.html';" class="transparentButton" data-icon="home" data-iconpos="notext"></a>
             <h1>Policy Subcategories</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" id="policy-list"></ul>
        </div>
    </div>
    <!--third page -->  
    <div data-role="page" id="policy-subpage2">
        <div data-role="header" data-theme="b">
            <a href="#" data-rel="back" data-role="button" class="transparentButton" data-icon="arrow-l" data-iconpos="notext"></a>
            <a href="javascript:window.location.href='index.html';" class="transparentButton" data-icon="home" data-iconpos="notext"></a>
             <h1>Policy Subcategories2</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" id="policy-list2"></ul>
        </div>
    </div>

我没有得到控制台下的任何错误，但它显示var info_sub2(在page3)是未定义的:https://www.dropbox.com/s/9l905xi13wt0yau/Untitled.png?dl=0(我没有足够的信誉上传截图，因此一个链接)

时，我一步一步地通过代码。所以，我想在我的第二页点击功能应该包含一些错误。然而，我无法解决它。

谢谢!