JQuery Mobile Linked Listview not working properly? - jquery-mobile

Question

So, I'm making an mobile e-commerce app using JQuery Mobile and I'm having the following issue.
After logging in, the app takes the user to the store area which consists on a linked listview populated with JSON data. Now when the store page first initialises, the links don't work, but when I refresh the page they work just fine. Does anyone know why I'm getting this behaviour?.
Note: I'm using a multipage template, to navigate from #store page to #product page.
Here the javascript I'm using for this:
$(document).on("pagebeforecreate","#store", function() {
getProducts('',
function(data){
let products = data.products;
storeProducts(products);
$(".product-list").html('');
$.each(products, function(i, item){
$(".product-list").append(`
<li>
<a href="#product" data-index="${item.prod_id}">
<img src="${item.picture}" alt="">
<h2>${item.prod_name}</h2>
<p>${item.prod_desc}</p>
<small>Price: <strong>€${item.unit_price}</strong></small>
</a>
</li>
`).listview("refresh");
});
},
function(e){
console.log(e);
},
function(data){
console.log('always');
});
});
function getProducts(param, success, error, always){
$.ajax({
type:'GET',
url:`./ajax/products-ajax.php?${param}`,
dataType: 'json',
async:true
}).done(function(data){
success(data);
}).fail(function(e){
error(e);
}).always(function(data){
always('always');
});
}
Thanks in advance.
UPDATE:
Hi deblocker,
Thanks again for your answer. There's no errors showing up in the console log. I tried turning off the cache in my browser and still have the same issue. Let me see if I can explain better what I am trying to do.
I am trying to make this app using JQuery Mobile for the frontend and PHP for the backend. I've got an index.php with links to get you either to login or register. Let's say that you select the login option, that's going to take you to login.php where there is a form which when you submit it makes an ajax request to the server to do authentication. Supposing the response is successful, that'll redirect you to store.php which is where the listview lives. As I say before, when you land in store.php after logging in the links in the listview don't work, however if you refresh the page the work as they are supposed to.

Answer 1

Here is what was causing the problem:
When redirecting the user to store.php after authentication, JQuery Mobile's Ajax navigation was grabbing the first page I had in there (store.php is multipage, containing #store and #product) and injecting it on top of what already was in the DOM. Of course when I clicked on my links these didn't work since there was no page containers with id = "product" in the DOM. When I refreshed the page JQuery mobile made a http request to the server, this time getting the full store.php with both pages #store and #product, hence the links would work as they were supposed to.
My solution: have both #store and #product as external pages. By separating them and calling them as external pages I avoid this issue with the Ajax navigation.