jquery - Ideas to get the localStorage CRUD for this web app working -

This is where you can see app running. I have been able to sort the information stored in local storage and also display it. (Click on display-data button after entering something in the form).

All code in jqm.js file has been successful with coming in. I like this when I click on an item from the list (see the output data function from the jqm.js file) to add a dynamic page that links to the item that I want to show more information about that particular item Was clicked for.

Please let the people, before coming along with the ways to "rewrite" the whole thing, I need a solution for my current code (if any) I should rewrite the whole argument from scratch Instead of working on your reasoning, many thanks for considering this expansion on being re-displayed. Any idea or suggestion in this area is more than appreciated, thanks in advance from the very first

I have There are some ideas for you.

Before you click on a list view element, you can create a dynamic page:

HTML: < Pre> & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; Jqm Complex Demo & lt; / Title & gt; & Lt; Meta name = "viewport" content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; minimum-scale = 1.0; user-scalable = a; target-density dpi = device-dpi" / " Gt; & Lt; Link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> & Lt; Script src = "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div data-role = "page" id = "index" & gt; & Lt; Div data-theme = "a" data-roll = "header" & gt; & Lt; H3 & gt; First page & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div data-role = "content" & gt; & Lt; Ul data-roll = "list view" data-theme = "A" & gt; & Lt; Li Data-id = "1" & gt; & Lt; A & gt; Dynamic Page 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li Data-id = "1" & gt; & Lt; A & gt; Dynamic page 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li Data-id = "1" & gt; & Lt; A & gt; Dynamic page 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div data-theme = "a" data-role = "footer" data-position = "fixed" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;

JS:

  $ (document) .on ('pagecreate', '#index', function () { $ (Document) .on ('click', '[data-role = "listview"] li', function (event) {if (event.handled! == true) // This event triggered again {Console.log ('click'); event.handled = true; // Click event is controlled, do not bind it next PageEd = parseInt ($ ('body [data-role = "Page"] '). Length (+' 'div data-roles = "page" id = "article' + next page id + '" & gt; & lt; div data- ($ [' data- Roll = '' page ']'). F-back "data-roll =" butt "Data-theme =" b "class =" ui-btn-left "> back  
 & lt; / div & gt; & lt; div data-role = "footer" data-theme = "B" data -set position = "fixed" data-id = "footer"> <> h1> footer    '); //console.log ($ (' body '). Html ()); // $ ('#text' + nextPageId) .trigger ('pagecreate'); $ .mobile.changePage ('# article' + Next page ed, {Infection: "slide", reverse: false}, true, true); }}); }); Secondly, because you are going to create dynamic content, you have to switch to prepare the document and switch to correct jquery mobile page events.  
 If you want to find out more about JQuery mobile page events, take a look at this  , or search for it  .