javascript - Disappearing list items when sorting/searching w/ list.js -

i've built location search widget using list.js here: http://tonic-agencyhq.co.uk/locations.php

the problem whenever search/sort of list items disappear. works fine if add items in actual html elements i'm using jquery+json generate items.

the code have used:

<div id="locations">    <input class="search" placeholder="search" />    <button class="sort" data-sort="location-title">sort title</button>    <button class="sort" data-sort="organisation">sort organisation</button>    <button class="sort" data-sort="city">sort city</button>    <ul class="list" id="locations-list"></ul>  </div>    <script src="content/themes/tui/assets/js/jquery.min.js"></script>    <script>        var $locations = $("#locations-list");         $.getjson("content/themes/tui/assets/json/locations.json", function (locations) {          $.each(locations, function(i, loc) {              var $li = $("<li><h3 class='location-title'>" + loc["location title"] + "</h3><p class='organisation'>" + loc["organisation"] + "</p><p class='address'>" + loc["address"] + "</p><span class='city'>" + loc["city"] + "&nbsp;|&nbsp;<span class='postcode'>" + loc["postcode"] + "</span>&nbsp;|&nbsp;<span class='country'>" + loc["country"] + "</span></li>");              $locations.append($li);          });      });     </script>    <script src="content/themes/tui/assets/js/list.min.js"></script>    <script>    var options = {    valuenames: [ 'location-title', 'organisation' , 'city' ]  };    var locationslist = new list('locations', options);    </script>

<script>  var $locations = $("#locations-list");  $.getjson("content/themes/tui/assets/json/locations.json", function (locations) {     $.each(locations, function(i, loc) {         var $li = $("<li><h3 class='location-title'>" + loc["location title"] + "</h3><p class='organisation'>" + loc["organisation"] + "</p><p class='address'>" + loc["address"] + "</p><span class='city'>" + loc["city"] + "&nbsp;|&nbsp;<span class='postcode'>" + loc["postcode"] + "</span>&nbsp;|&nbsp;<span class='country'>" + loc["country"] + "</span></li>");         $locations.append($li);     });  var options = {    valuenames: [ 'location-title', 'organisation' , 'city' ] };  var locationslist = new list('locations', options); });  

your ajax call asynchronous here, move list creation inside this. dynamic list ($locations.append()) not getting passed list.js. why seeing staically created ul after sort , not dynamically created.