how to use jquery-mobile listview to link to inner pages with UrlVars?

Question

I have a problem with jquery-mobile listview.

I some inner pages (#page1, #page2,..) into the same html file. eg in #page2, I have a jquery listview object:

<ul id="itemList" data-role="listview"></ul>  

Each item of the listview has a URL that is the inner page plus an index generated in a js file into a HEAD of html file. Some of code into the js file:

$.each(data, function(index, record) {
$('#itemList').append('<li><a href="#page2?id=' +  record.id + '"></a></li>');
});
$('#itemList').listview('refresh');

The mouse over items shows differents links with each index "id". But only the first click works and goes to the correct page eg page2?id=id1 Returning to the page with the listview and clicking over another item eg /page2?id=id2, the page displayed is the previous (the first link clicked) page with id1

It could be a problem of the UrlVars notation? When I used href="page.html?id=.... or href="#page without additional indexes there is no problem and listview works fine. But with href="#page?id=... dosen't work. Sound like a refresh problem? Maybe related with the DOM?

Any idea?

I'm Sorry, I do not know if I have explained the problem correctly.

Thank you! Best Regards.

Answer 1

Try the following:

$.each(data, function(index, record) {
    $('#itemList').append('<li><a href="#page2?id=' +  record.id + '">' + record.id + '</a></li>');
});

You don't have to repeat code since you are already looping over that same piece inside the each function.