Question

我正在尝试为应用程序创建列表项的菜单并将其附加到。当用户退出应用程序时，我希望完全删除菜单。如果他们选择重新登录，我希望再次添加菜单等等。

这是我的jQuery代码，当它们进入主菜单页面时会触发。

$('#menubuilderbutton').on("click", function(){
var entityType = sessionStorage.getItem('entityType');
//alert(entityType);

if(entityType == 3){ //TEACHER
    var menu = '<li data-role="list-divider" class="menuitem">'+sessionStorage.getItem('schoolName')+'</li>';
    menu += '<li data-theme="c" class="menuitem"><a href="#news"><img src="Images/news.png" /><h3>School News</h3><p>Hot off the presses!</p></a></li>';
    menu += '<li data-theme="c" class="menuitem"><a href="#events"><img src="Images/events.png" /><h3>School Events</h3><p>Latest happenings</p></a></li>';
    menu += '<li data-theme="c" class="menuitem"><a href="#cafeteria"><img src="Images/cafeteria.png" /><h3>Lunch Menu</h3><p>What\'s for lunch today?</p></a></li>';
    menu += '<li data-theme="c" class="menuitem"><a href="#myclasses"><img src="Images/classes.png" /><h3>My Classes</h3><p>Your current classes</p></a></li>';
    menu += '<li data-theme="c" class="menuitem"><a href="#myorganizer"><img src="Images/organizer.png" /><h3>My Organizer</h3><p>Keeping you organized</p></a></li>';
    //$(menu).appendTo('#mainmenu');
    $('#mainmenu ul').append(menu);
}
}); //end menu building click function

在这段代码中，我试图创建一个名为menu的变量并将所有列表项连接在一起，然后将它们附加到我在这里创建的无序列表中：

<div data-role="content" class="content" data-theme="b" id="mainmenu">
    <ul style="margin-right:auto;margin-left:auto;" data-role="listview" data-inset="true">
    </ul>
</div>

我第一次登录时就像魅力一样（http://dl.dropbox.com/u/32344563/WorkingApp.png），但是当我退出并重新登录时，它看起来像列表项已成功删除，但未正确添加（http://dl.dropbox.com/u/32344563/NotWorkingApp.png）。

以下是用户注销时运行的代码：

$('#logoffbutton').on("click", function(){
    sessionStorage.clear();
    $('#user_name').empty();
    $('li.menuitem').remove();
    $.mobile.changePage('#landing');    
});

有谁知道如何删除这些讨厌的列表项并重新添加而不会发生意外？我确信这是非常简单的，我还没有看到或者还不知道。在jQuery方面我很天真，所以任何关于如何改进功能或代码布局的技巧都将受到高度赞赏。

Answer 1

您需要刷新列表：

    $('#mainMenu').listview('refresh');

在jQuery中追加/删除/重新载入<li> </li>

1 个答案: