Create dynamic page in Listview with Jquery

Question

I want create a dynamic page where I click a Listview option.

My HTML markup for the listview home and page option is this:

<body onload="inici(); ">
<div id="home" data-role="page">
    <div data-role="header" data-theme="c"><h1>Receptes de cuina</h1></div>
    <div data-role="content">
        <ul data-role="listview" data-filter="true" id="articleList"></ul>
    </div>
</div>

<div data-role="page" id="chapter">
     <div data-role="header" data-position="fixed" data-theme="b">
      <a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Header page </h1>
      <a href="" data-role="button" class="next" data-icon="forward" data-iconpos="notext">Next</a>
   </div>
    <div data-role="chapter_content"></div>


     <div data-role="footer" data-theme="d">
      <span class="ui-title" />
      <label for="chapter_num">Jump to chapter</label>
      <select name="chapter_num" id="chapter_num" data-mini="true"></select>
   </div>
</div>
</body>

First I fill a listview from XML file with jQuery. The code run correctly and is:

$.ajax({
         type: "GET",
         url: "https://script.google.com/macros/s/XXXXXXXXX"; 
         dataType: "xml",
         success: function(xml) {
            var resultat = xml; 
            $(xml).find('recepta').each(function(){
                var categoria = $(this).find('categoria').text() ; 
                var name_text = $(this).find('titol').text() ; 
                var foto = $(this).find("informacio_general").children("foto_recepta").text(); 
                var id = $(this).attr('id');
           $('#articleList').append('<li><a href="#chapter?id=' + id +'"><img src="' + foto + '" class="foto_thumb" />' + name_text +  '</a></li>');   
  }); //close each(
            $('#articleList').listview('refresh');
   }
  }); //close $.ajax(
  }  // fi inici 

The listview list charge perfectly from XML file, but I can't generate the dynamic page "chapter" when I click a listview option..... I find any code and try adapter it, but not run....

$(document).on('pagebeforeshow', '#home', function(e,data) {
      if ( typeof data.toPage === "string" ) {
      var url = $.mobile.path.parseUrl( data.toPage ), regex = /^#chapter/;
      if ( url.hash.search(regex) !== -1 ) {
         var id = data.toPage.substr(data.toPage.lastIndexOf("id") + 1).substr(4);
        showChapter(id);  
        e.preventDefault()
              }
   }
});

function showChapter(id) {
    var htmlGeneratedOnTheFly =" The id is " + id ; 

    $('#chapter_content').empty();
    $('#chapter_content').append(htmlGeneratedOnTheFly);
    $('#chapter_content').trigger('create');

   $.mobile.changePage('#chapter', {transition:"flip"});
};

Can anyone help me, how to fill the DIV layers at chapter page, when I click a listview option?

Thanks