Jquery Mobile read document in dynamic list

Question

I'm developing Phonegap App with JqueryMobile.i want to create a dynmaic list that show each element

I have 3 html files and 1 php file: index.html > list.html > details.html JS is inside html files.

I use jquery-1.6.4.min.js & jquery.mobile-1.4.5.min.js

index.html:

 ...
    HTML
    ...
    <script>
    $(document).ready(function(){
     $("#button").click(function(){
      $.post("myURL", {myparameters}, function(data) {
       var obj = jQuery.parseJSON(data);
       for (i = 0; i < obj.length; i++){
         var lista = $("\
         <td style='width:100px;height:100px' >\
          <a href='details.html' id='details' class='details' value='"+obj[i]["id"]+"'>\
           <img style='width:100px;height:100px' src='"+image+"'>\
          </a>\
         </td>");

        list.appendTo("#...");
        }
       });
      });
     });
    </script

>

list.html:

...
HTML
...

<script>

$(document).ready(function(){
 $(".details").click(function(){
   $.post("myURL", {myparameters}, function(data) 
   {
  *Here I load details data*
   });

 });
});
</script>

Problems/Questions:

$(document).ready(function){...}; load dynamic list only once.When i go to other menu,data from list.html dissapear.
When I click in some element from list.html,jquery code dont load data in details.html
JQ 1.6.4 & JQM 1.4.5 are okey?

I know that i do something wrong about read the document.I read JqueryMobile documentation and I tried other methods like:

$(document).on('pagecreate',function()...

$(document).on('pagebeforecreate',function()...

$(document).on('pageinit',function()...

but didn't work so help me Masters of JQ and JQM D:

Santosh Santosh · Accepted Answer · 2017-05-12T12:19:16

$(document).ready(function){...}; load dynamic list only once.When i go to other menu,data from list.html dissapear. When I click in some element from list.html,jquery code dont load data in details.html

You insert all your pages as divs, and do transition between them. Here is an example code from the jquery official documentation about how to create "multiple divs" and toggle between them

Body consisting of several div elements which are enhanced using the page widget. Each such page has an id attribute to distinguish it from other pages.

The pages can be interlinked using anchors.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
  </div>
</div>
<div data-role="page" id="page2">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
  </div>
</div>

As you are using jquery mobile 1.4.5, you can use this boilerplate code to get started quickly

JQ 1.6.4 & JQM 1.4.5 are okey?

According to official site, these are the jquery versions supported jQuery 1.8 - 1.11 / 2.1.

Jquery Mobile read document in dynamic list

1 Answers