Я пытаюсь создать меню пунктов списка для приложения и добавить его в. Когда пользователь выходит из приложения, я хотел бы полностью удалить меню. Если они решат войти снова, я бы хотел, чтобы меню было добавлено снова и т. Д. И т. Д.
Вот мой код 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, поэтому любые советы по улучшению функциональности или макета кода будут с благодарностью.