2. <ul data-role="listview">
3. <li><img src="A.png" class="ui-li-icon"> <a href="countries.html?c=a">Asia</a></li>
4. <li><img src="E.png" class="ui-li-icon"> <a href="countries.html?c=e">Europe</a></li>
5. </ul>

"countries.html" consumes JSON and populates the list:

2. <div data-role="page">
3. <script>
4. $.getJSON("http://api.somewhere.com/countires", function(data) {
5.  $('#catList').empty();
6.  $('#catList').listview();
7.      $.each(data.DATA, function(index, item) {
8.          var url = 'cities.html?c=' + item[0];
9.          var title = '<li><a href="' + url + '>' + item[1] + '</a></li>';
10.          $('#catList').append(title);
11.      });
12.      $('#catList').listview("refresh");
13. });
14. </script>
16. <div data-role="header">
17. <h2>Countries</h2>
18. </div>
19. <ul data-role="listview" id="catList">
20. </ul>
21. </div>

If I click on Asia first, I see "China, Japan, ..." but Europe comes up empty (although I see the data in #catList. If I click on Europe first, I see "France, Germany, ..." but nothing in Asia. What am I doing wrong?