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

});

第一个错误，关闭按钮内的标签并给它一个#tag。
您的动态页面div未正确关闭

jQuery Mobile：如何在动态生成的页面之间导航

1 个答案: