1

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

如何在动态生成的页面之间导航？

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

4

1 回答 1

2

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

看看我的工作示例，它是由您的代码制成的：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);    

});
  • 第一个错误，关闭按钮内的 a 标签并给它一个 # 标签。
  • 您的动态页面 div 未正确关闭
于 2013-03-31T22:26:49.887 回答