Question

使用jQuery Mobile，下面的代码可以正常工作，但是当我点击一个菜单项然后点击“返回”我的所有菜单项都有重复/附加等。

 $.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');



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



    });

如何阻止此行为？

Answer 1

我会从你的上一个问题中找到解决方案，这将更容易理解

看看工作示例：http://jsfiddle.net/Gajotres/3kPTf/

基本上在添加内容之前，您需要检查该常量是否已存在。

在您的情况下，每次添加新按钮/页面时，请检查该按钮/页面是否已经存在，如下所示：

if(!$('#second').length){
     // In this case this code block will execute if button with an id second don't exist
}

这是一个代码示例：

$(document).on('pagebeforeshow', '#index', function(){  
    if(!$('#second').length){
        $.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);        
    }
});

单击后退按钮后，jQuery移动菜单项会重复

1 个答案: