Question

我有一个jQuery单页应用程序，但不是我想要的方式。我有一个从JSON文件中读取的县列表（可以过滤列表）。当选择一个时，它显示为一个超链接，链接到另一个“页面”与该县的一个城镇（“页面”实际上只是同一页面中的一个div）。麻烦的是我必须事先手动创建div。例如，如果JSON文件中有五个项目，并且我想再添加一个项目，我必须在页面中手动添加一个额外的div。它适用于县，我可以添加额外的县到JSON，它建立一个额外的超链接，但它链接到“页面”我需要在HTML中创建一个新的div。当我动态创建div时（在Javascript代码的内部“each”下）当你点击链接时没有任何反应，因为html中不存在div。这个问题有方法解决吗？（见下面的代码）

HTML (with js):



<!doctype html>
<html>
<head>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"></script>
    <title>How to Parse a JSON file using jQuery</title>

</head>
<body>

<div data-role="page">   

<a href="#myKoolPanel" class="ui-btn ui-icon-navigation ui-btn-icon-left" data-iconpos="notext">Menu</a>
   <div data-role="content">
        <div id="results">
            <ul id="mynewlist" data-role ="listview" data-autodividers="true" data-filter="true" data-filter-reveal="true">


            </ul>

        </div>
   </div>

    <div data-role="panel" class="cd-panel from-left" data-position="left" data-position-fixed="false" data-display="reveal" id="myKoolPanel" data-theme="a">

                    <ul id ="myul" data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">

                        <li>
                            <a href="Test1.html">Towns in Ireland</a>
                        </li>
                        <li>
                            <a href="Test2.html">Map of Ireland</a>
                        </li>
                    </ul>

    </div>

 </div>

    <script>

       $(document).ready(function(){

    $.getJSON( "data.json", function( data ) {

        var items = [];
         var z=0;
        $.each( data, function( i, item ) {  
            z=z+1;

             items.push('<li><a href=#textcontainer'+z+'>' + i +  '</a></li>');
             $.each(item, function(property, value) {

                $('#textcontainer'+z).append(value);  
            });        


                });

                $('#mynewlist').append( items.join('') );
            });

        });


    </script>
<div id ="textcontainer1"> </div>
<div id ="textcontainer2"> </div> 
<div id ="textcontainer3"> </div>
<div id ="textcontainer4"> </div>
<div id ="textcontainer5"> </div>
</body>
</html>

JSON文件：

{


        "Kerry": {
            "town": "Kenmare"

        },


        "Cork": {
            "town": "Mallow"

        },


        "Limerick": {
           "town": "Charleville"

        },


        "Meath": {
            "town": "Trim"

        },


        "Waterford": {
            "town": "Lismore"

        }

}

Answer 1

使用AngularJs可以解决它。

定义js文件，如下所示

var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
var data;
$scope.data =[{
         "name":"Kerry",
        "town": "Kenmare"
    },
    {
        "name":"Cork",
        "town": "Mallow"
    },
    {
       "name":"Limerick",
       "town": "Charleville"

    },
    {
        "name":"Meath",
        "town": "Trim"
    },
    {
        "name":"Waterford",
        "town": "Lismore"
    }] ;
  });

HTML文件代码：

<!DOCTYPE html>
<html ng-app="app">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"> </script>
 <script language="javascript" type="text/javascript" src="fileName.js">     </script>
</head>
<body>
  <div ng-controller="ctrl">
     <div ng-repeat="d in data">
         {{d.name}} : {{d.town}}
     </div>
  </div>
</body>
</html>

我希望这会有所帮助。

jQuery单页应用程序动态div

1 个答案: