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未正确关闭