jQuery Mobile的：如何使用动态生成的页面

Question

之间导航jQuery Mobile下面的代码将执行以下操作...

1）它产生的菜单项，并将它们添加到索引页面。

2）它创建菜单项的实际页面。

现在，当我点击一个菜单项时，它似乎没有移动到该页面？我可以在标记中看到页面存在正确的ID。

这是我到目前为止。

$.each(siteData["pages"], function(i,v) { 
    $.mobile.activePage.find('[data-role=content]').append('' + 
     '<a href='+ v["id"] + ' data-role="button">' + v["name"] + '</a>').trigger('create'); 

     // Prepare your page structure 
     var newPage = $("<div data-role='page' id=>" + v["id"] + 
      "<div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>" + 
         "<h1>Dynamic Page</h1>" + 
         "</div>" + 
         "<div data-role=content>Stuff here</div>" + 
         "</div>"); 

       // Append the new page info pageContainer 
       newPage.appendTo($.mobile.pageContainer); 



      }); 

标记

<div data-role="page" id="index"> 
    <div data-theme="a" data-role="header"> 
     <h3></h3> 
    </div> 
    <div data-role="content" class="navlist"></div>  
</div> 

我如何动态生成的页面之间进行导航？

有人可以给我一个例子使用我的代码。谢谢。

Answer 1

不幸的是，你几乎没有错误。

看看我的工作实例，它是做出来的代码：http://jsfiddle.net/Gajotres/3kPTf/

$(document).on('pagebeforeshow', '#index', function(){  
    $.mobile.activePage.find('[data-role=content]').append('<a href="#second" data-role="button">Second</a>').trigger('create'); 

    var newPage = $("<div data-role='page' id='second'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>" + 
         "<h1>Dynamic Page</h1>" + 
         "</div>" + 
         "<div data-role=content>Stuff here</div>" + 
         "</div>"); 

    // Append the new page info pageContainer 
    newPage.appendTo($.mobile.pageContainer);  

}); 

• 第一个错误，关闭一个标签按钮里面，给它一个＃标签。
• 你的动态页面div没有正确关闭