title: Jquery Mobile List Click
body: <p>I've created a mobile listview below with Jquery and it's rendering just fine. What I want some help with is when you click on a particular list element - right now I have it set that it goes onto a new page and it shows the resteraunt id. What I want to try and do is that the same information of the specific listview entry that was clicked would be rendered on the new page, meaning all the info I had before in the list element clicked would be rendered on the new page in just a simple paragraph. It's me trying to get my head around this dynamic listviews is where im having trouble. Can anyone please help? I'd really appreciate it - the database information is reading over perfectly!</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;Find A Deal&lt;/title&gt;
  
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  
      &lt;style&gt;
          img.fullscreen {
              max-height: 100%;
              max-width: 100%;
          }
          &lt;/style&gt;
  
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).on('pagebeforeshow', '#index', function(){
          $("#list").empty();
          var url="http://localhost/test/json3.php";
          $.getJSON(url,function(json){
              //loop through deals
              $.each(json.deals,function(i,dat){
                  $("#list").append("&lt;li&gt;&lt;a id='"+dat.restaurantid+"'&gt;&lt;h1&gt;"+dat.name+"&lt;/h1&gt;&lt;p&gt;"+dat.dname+"&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;");
                  $(document).on('click', '#'+dat.restaurantid, function(event){  
                      if(event.handled !== true) // This will prevent event triggering more then once
                      {
                          listObject.itemID = $(this).attr('id'); 
                          $.mobile.changePage( "#index2", { transition: "slide"} );
                          event.handled = true;
                      }
                  });            
              });
              $("#list").listview('refresh');
          });
      });
  
      $(document).on('pagebeforeshow', '#index2', function(){       
          $('#index2 [data-role="content"]').html('You have selected Link' + listObject.itemID);
      });
  
      var listObject = {
          itemID : null
      }    
  &lt;/script&gt;
  &lt;/head&gt;     
  &lt;body&gt;    
  &lt;div data-role="page" id="index"&gt;
      &lt;div data-role="header" data-position="fixed"&gt;
          &lt;h1&gt;Current Deals&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div data-role="content"&gt;
          &lt;div class="content-primary"&gt;
              &lt;ul id="list" data-role="listview" data-filter="true"&gt;&lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div data-role="footer" data-position="fixed"&gt;
          &lt;div data-role="navbar"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="http://localhost/findadeal/index.html" data-icon="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://localhost/findadeal/mydeal.html" data-icon="grid"&gt;My Deals&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--New Page --&gt; 
  
  &lt;div data-role="page" id="index2"&gt;
  &lt;div data-role="header"&gt;
          &lt;h1&gt; Find A Deal &lt;/h1&gt; 
      &lt;/div&gt;
  
      &lt;div data-role="content"&gt;
          &lt;a data-role="button" href="#page1" data-icon="star" data-iconpos="left"&gt;Get Deal &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;footer data-role="footer" data-position="fixed"&gt;
          &lt;nav data-role="navbar"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html" data-icon="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#index" data-icon="grid"&gt;My Deals&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/footer&gt;   
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>