json - jQuery Mobile and ajax on load -

well i´ve been breaking head problem time, i´ve tried tons of solutions online yet none of them work.

what need feed data json listview on page load , present yet works on index after need reload every page can see listview.

here´s jquery code:

$(document).bind("mobileinit", function () {                 $.mobile.ajaxenabled = false;             });             $(document).bind('pageinit',function() {                 drawpagecontent();             });               function drawpagecontent() {              $.ajax({                   datatype: "json",                   url: "js/categorias.json",                   success: function(msg){                                 console.log(msg.categorias[1].nombre);                                 var categos = '';                                 for(var i=0;i<msg.categorias.length;i++){                                     categos += '<li><a href="refrescos.html?id='+ 0 +'"><img src="'                                     + msg.categorias[i].logo + '"><h2>'+msg.categorias[i].nombre                                     + '</h2><p>' + msg.categorias[i].desc + '</p></a></li> ';                                 }                                 $("#categorias").html(categos);                                 $("#categorias").listview("refresh");                                 //$("#page").trigger("pagecreate");                             }                 });} 

i've tried $(document).ready() , other things.

here's html part:

<div id="page" data-role="page">      <div data-role="header">         <h1>categorias</h1>         <a href="#popupopciones" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="gear" data-theme="b" data-transition="pop">opciones</a>     </div>      <div data-role="content">         <ul id="categorias" data-role="listview" data-inset="true">         </ul> 

any ideas how fix this?

if trying append id "categorias" each time why appends first page.

in jquery mobile pages loaded aren't removed dom right away. means if load more 1 page has , element id categorias in it, end multiple dom elements categorias identifying them. in case, append first one, explain why not showing on other pages until refresh , other pages removed dom.

a solution here give each page unique identifier , select categorias page using

$("#categorias", "#pageidentifier"); 

this selector search within specific page specify find categorias element.