title: Populating listview with jQuery Mobile on a multi-page template
body: <p>I am trying to render a listview on a second page using jquery.mobile.</p>
  
  <p>I am using a single HTML with multiple "pages". </p>
  
  <pre><code>    &lt;div data-role="page" id="foo"&gt;
      &lt;a href="#bar" data-role="button" data-inline="true" id="loadList)"&gt;List&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;div data-role="page" id="bar"&gt;
      &lt;div id="ListDiv"&gt;
      &lt;ul id="listview" data-role="listview" data-inset="true"&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;!--application UI goes here--&gt;
  
  &lt;script type="text/javascript"&gt;
  $("#loadList").click(function(){
      $.getJSON(
                "http://localhost/index.php/api/list",{format: "json"},
                function(data){
                    var output = '';
                        $.each(data, function(key, val) {
                            output += '&lt;li&gt;&lt;a href="#"&gt;' + val +'&lt;/a&gt;&lt;/li&gt;';
                        });
                        $('#listview').append(output).listview('refresh');
                    });
      });
  </code></pre>
  
  <p></p>
  
  <p>But the problem now is when I click the #loadList button, it does take me to the #bar page, however, it doesn't seem $("#loadList").click() gets executed, because the list doesn't show up on the #bar page. Namely, nothing gets appended to #listView.</p>
  
  <p>Any thoughts?</p>