I start with a listview that contains all states with a click event on each to build event headers by state (below). Once a state is selected, I fetch event headers and build another listview using this function. Once an event header is selected, I populate a detail page. When loading fresh and selecting a state (Arkansas), the listview is populated and selecting an event populates the detail screen as expected. Hitting the "back" button (data-role=backbutton), selecting another state, then an event for that state throws e.dataItem undefined in the click method of the function below. If I go back again, select another state, then sometimes it works, sometimes it doesn't. What am I doing wrong here?
function BuildEventHeadersListByState(abbr){ app.showLoading(); var stateAbbr = abbr; var xml; var template = kendo.template($("#ulEventHeaders-template").html()); var dataSource = new kendo.data.DataSource({ transport: { read: function(options){ $.ajax( { type: "GET", data: { "apikey": apiKey, "stateAbbreviation": stateAbbr}, dataType: "text", success: function(result) { options.success(result); app.view().header.find(".km-navbar").data("kendoMobileNavBar").title(abbr + " Events"); app.hideLoading(); } }); } }, schema: { type: "xml", data: "/ArrayOfEventHeader/EventHeader", model: { // configure the fields of the object fields: { EventCity: "EventCity/text()", EventDate: "EventDate/text()", EventID: "EventID/text()", EventTitle: "EventTitle/text()", } } } }); $("#ulEventHeaders").kendoMobileListView({ dataSource: dataSource, template: $("#ulEventHeaders-template").text(), dataBound: function(){ this.scroller().reset(); //scroll to top }, click: function(e){ var eventID = e.dataItem.EventID; BuildEventDetailsByEventID(eventID); } });}