jQuery Forum

I'm using the data-* attribute to pass parameters between pages and it works, but only the first time.

I have a dynamically generated list of which I bind each <li> to a click event which adds the data attribute data-objectid to the target page. When I click a <li> the first time, lets say K0001, it works, but if I back and click another <li> the code $(this).data("objectid") returns the previous result (K0001). However, if I check the element in Chrome the data-objectid has the correct value (K0002). I'm having a hard time understanding why.

Here's some code:

1. //This code produces the list
2. function listObjects(t, result) {
3.                 $("#objectListItems").empty();
4.                 for (i = 0; i < (result.rows.length); i++) {
5.                     var list = $("<li>");
6.                     var details = $("<a>").text(result.rows.item(i).kpt);
   
7.                     $(details).attr("href", "#cableBoxMenu");
8.                     $(details).attr("data-objectid", result.rows.item(i).kpt);
9.                     details.appendTo(list);
10.                     $(list).appendTo("#objectListItems");
11.                 }
12.                 $("#objectListItems").listview("refresh");
13.             }

Here's the code that binds the click event:

1.  $("a[href=#cableBoxMenu]").live("click", (function () {
2.                 //To inject attribute data value into the opening page
3.                 $("#cableBoxMenu").attr("data-objectid", $(this).data("objectid"));
4.             }));

Here's the HTML for the target:

1. <div id="cableBoxMenu" data-role="page">
2.     <div data-role="header" data-position="fixed">
3.         <h1 class="cableBoxName"></h1>
4.     </div>
5.     <div data-role="content">       
6.         <ul data-role="listview">
7.             <li><a href="#cableBoxGeneral" data-transition="slide">Allmänt</a></li>
8.             <li><a href="#cableBoxInternalList" data-transition="slide">Bestyckning</a></li>
9.             <li><a href="#checkList" data-transition="slide">Checklista</a></li>
10.             <li><a href="#cableBoxMaterial" data-transition="slide">Material</a></li>
11.             <li><a href="#cableBoxSign" data-transition="slide">Signera</a></li>
12.         </ul>   
13.     </div>
14.     <div data-role="footer" data-position="fixed">
15.         <img src="CSS/images/Poweredby.png" />
16.     </div>
17.        
18. </div>

And finally, the code that is supposed to update the class cableBoxName with the data-objectid attribute, which only works the first time, even though the objectid tag is correct the second time:

1. $("#cableBoxMenu").live("pageshow", function (event, ui) {
2.                 var id = $(this).data("objectid");
3.                 alert(id);
4.                 $(".ui-page-active .cableBoxName").text(id);
5.             });

I have also added an image so that you can see what I mean:

Hello!

I'm having trouble getting my webapp to work on my iPhone when going offline. It works online, but when switching to flight mode the links doesn't work. I suspect it's the same problem as this issue(https://github.com/jquery/jquery-mobile/issues/926), but I'm using the latest jQuery and JQM files and still I get the problem.

So my question is if the issue is fixed and if not, how can I fix it myself.

PS. I've got one index file in the root with the menu, and three other views under a separate "Views" folder. I've read somewhere that it works if you make a single HTML file.