将数据从一个页面传输到另一个jQuery Mobile

我使用PhoneGap按照这个优秀的教程（链接）创建了一个地理定位应用程序。不幸的是，我遇到了一个我无法弄清楚的问题。让我头疼的相关部分是这些：

//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());
});

第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);
});

第 1 部分工作正常，数据存储，并且创建列表没有任何问题。但是在第 2 节中，一切都会下地狱。通过单击元素，应该创建一个新属性 （track_id），但它没有。因此，在第 3 节中，"var 键"不会获得值，因此，"var 数据"也将为 null。可以想象，从那里开始什么都不起作用。我在这里做错了什么？我只包含了我认为相关的代码，但如果需要更多，我会这样做。谢谢！