Transfer data from one page to another jQuery Mobile

Question

I using PhoneGap to create a Geolocation App following this excellent tutorial ( link ). Unfortunatelly, I'm having an issue that I can't figure out. The relevant parts that are giving me a headache are these:

//Section 1

$('#history').on('pageshow', function () {

tracks_recorded = window.localStorage.length;
$("#tracks_recorded").html("<strong>" + tracks_recorded + "</strong> workout(s) recorded");

$("#history_tracklist").empty();

for (i = 0; i < tracks_recorded; i++) {
    $("#history_tracklist").append("<li><a href='#track_info' data-ajax='false'>" + window.localStorage.key(i) + "</a></li>");
}

$("#history_tracklist").listview('refresh');
});

//Section 2

$("#history_tracklist li a").on('click', function () {

$("#track_info").attr("track_id", $(this).text());

});

//Section 3

$('#track_info').on('pageshow', function () {

var key = $(this).attr("track_id");

$("#track_info div[data-role=header] h1").text(key);

var data = window.localStorage.getItem(key);

data = JSON.parse(data);
});

Section 1 works just fine, the data is stored, and the list is created without any issues. But then in Section 2 is when everything goes to hell. By clicking on the element, a new attribute (track_id) is supposed to be created, but it doesn't. Therefore, in Section 3, the "var key" won't get a value, and as a consequence, "var data" will be null also. As you can imagine, nothing works from there. What am I doing wrong here? I only included what I considered the relevant code, but if more is needed I'll do so. Thansk!

Answer 1

In section 2, I think you just need to delegate click handling to the "#history_tracklist" container, as follows :

$("#history_tracklist").on('click', "li a", function () {
    $("#track_info").attr("track_id", $(this).text());
});

Without delegation you have a rule saying :

when any existing li a element within #history_tracklist is clicked execute my function

With delegation, you have a rule saying :

when any existing or future li a element within #history_tracklist is clicked execute my function