使用过滤器在JQM的listview中的Autodividers

Question

我在JQM的listview中使用autidividers并填充新的“页面”，当显示所有列表时工作正常但是当用户过滤列表时，相应的页面不显示。我确信我错过了一些明显的东西，所以会感激任何帮助。

JS

$(document).ready (function() {
  $.getJSON("eur_countries_array.json", function (data) {
    var countries = [];
    for (var obj in data){        
        countries.push({
            title: data[obj].title,  
            flag: data[obj].flag,
            population: data[obj].population,
            avg_annual_growth: data[obj].avg_annual_growth,
            date: data[obj].date
        });
    }
    // call sort function
    countries.sort(compare);

    // read through array
    var listHTML = "";
    for (var i=0; i < countries.length; i++) {
        // for each country add flag and title to list
        listHTML += '<li><a href="#' + countries[i].title + '"><img class="ui-li-icon ui-corner-none alt="'+ countries[i].flag + 's flag" src="flags/16/' + countries[i].flag +'.png" >'  + countries[i].title  + '</a></li>';

        // Append new "pages" after "home" page for each country
        var pHTML = '<div data-role="page" id="' + countries[i].flag + '">';
        pHTML += '<div data-role="header"><h1>' + countries[i].title + '</h1><a data-rel="back">Back</a></div>';
        pHTML += '<div role="main" class="ui-content" class="country_details">';
        pHTML += '<div class="center"><img class="flag_display" alt="'+ countries[i].flag + 's flag" src="flags/64/' + countries[i].flag +'.png" ></div></div>';
        pHTML += '<div><p class="center">Population of ' + countries[i].title + ' is ' + countries[i].population + '</p></div>';
        pHTML += '<div><p class="center">Average annual growth: ' + countries[i].avg_annual_growth + '</p></div>';
        pHTML += '<div><p class="center">Statistics correct as of: ' + countries[i].date + '</p></div>';
        pHTML += '</div>';
        console.log(pHTML);
        $("body").append(pHTML);
    }
    // Display countries list
    // call the refresh method to update the visual styling after adding new elements
    $("#countryList").empty().append(listHTML).listview("refresh");
  });
});

HTML

<div data-role="page" id="home">
  <div data-role="header">
    <h2>European Countries</h2>
  </div>
  <div role="main">
    <ul id="countryList" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
      <li></li>
    </ul>
  </div>
  <div data-role="footer">
  </div>
</div><!-- page -->