使用 Jquery 在 Listview 中創建動態頁面

Question

我想創建一個動態頁面，在其中單擊 Listview 選項。

我的列表視圖主頁和頁面選項的 HTML 標記是這樣的：

<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>

首先，我使用 jQuery 從 XML 文件中填充列表視圖。 代碼運行正確，是：

$.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 

listview 列表從 XML 文件中完美收費，但是當我單擊 listview 選項時，我無法生成動態頁面“章節”.....我找到任何代碼並嘗試對其進行適配器，但沒有運行....

$(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"});
};

當我單擊列表視圖選項時，任何人都可以幫助我，如何在章節頁面填充 DIV 層？

謝謝