jQuery Отдельная страница приложения динамические divs

У меня есть приложение для одиночной страницы jQuery, которое работает, но не так, как я этого хочу. У меня есть список округов, которые читаются из файла JSON (список можно фильтровать). Когда он выбран, он отображается как гиперссылка, которая ссылается на другую «страницу» с городом из этого округа («страница» на самом деле является просто div на той же странице). Проблема в том, что я должен вручную создать divs заранее. Например, если в файле JSON есть пять элементов, и я хочу добавить еще один, мне нужно вручную добавить дополнительный div на странице. Он работает нормально для округов, я могу добавить дополнительные окружения в JSON, и он создает дополнительную гиперссылку, но для «страницы», на которую он ссылается, мне нужно создать новый div в html. Когда я создаю divs динамически (под внутренним «каждый» в коде Javascript), ничего не происходит, когда вы нажимаете на ссылку, поскольку div не существует в html. Есть ли решение для этого? (См код ниже)jQuery Отдельная страница приложения динамические divs

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" 

     } 

}

источник

2015-06-18 leesider

Вы могли бы создать jsfiddle из этого? – Pawan

Я могу, но файл JSON является локальным файлом, мне некуда его загружать. – leesider

Кажется, что это работает, но он только добавляет HTML один раз (сначала в pageload). Если я изменю то, что я хочу добавить (например, я меняю «Джон» на «Кевин»), и я обновляю страницу, которую она не делает, t меняет html с «Джон» на «Кевин». $ (document) .ready (function() { event.preventDefault(); $ ('body'). append ('

johnKEVIN

'); – leesider

Использование 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>

Я надеюсь, что это поможет.

источник

2015-06-18 11:47:19 Flash

, если вы хотите добавить внутри div, используйте

{{d.name}} : {{d.town}}

– Flash

Да, это сделало бы Flash, но мне нужно было бы жестко закодировать JSON в scope.data (по существу, с той же информацией дважды) .Однако я могу получить информацию о scope.data для чтения из json-файла. – leesider

@leesider затем присваивал json-файл $ scope.data или хранилище localStorage – Flash

jQuery Отдельная страница приложения динамические divs

ответ

Смежные вопросы