文章/答案/技术大牛

发布

问jQuery单页应用动态div
EN

Stack Overflow用户

提问于 2015-06-18 17:54:45

回答 1查看 241关注 0票数 0

我有一个jQuery单页应用程序，但不是我想要的方式。我有一个从JSON文件读取的县列表(该列表可以被过滤)。当选择一个时，它显示为一个超链接，链接到另一个具有该县城镇的“页面”(该“页面”实际上只是同一页面中的一个div )。问题是我必须事先手动创建div。例如，如果JSON文件中有5个条目，而我想再添加一个条目，则必须在页面中手动添加一个额外的div。它适用于县，我可以添加额外的县到JSON，它建立了一个额外的超链接，但对于它链接的“页面”，我需要在html中创建一个新的div。当我动态创建div时(在Javascript代码中的内部"each“下)，当您单击链接时没有任何反应，因为这个div在html中不存在。对此有解决方案吗？(参见下面的代码)

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"

        }

}

javascript

jquery

json

回答 1

Stack Overflow用户

发布于 2015-06-18 19:47:19

使用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>

我希望这能有所帮助。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30912144

复制

相似问题

问jQuery单页应用动态div
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery单页应用动态divEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery单页应用动态div
EN