title: How can I add a click event to li element listview in Phonegap JQM?
body: <p>I'm having problems adding a click event to a dynamically populated listview using JQM and Phonegap (A static list works correctly). The listview populates and applies css correctly but when I try to add a click event using the <code>$("#test li".on("click")</code> the id is not selected and no code executes. Any ideas?  </p>
  
  <p><strong>JS :</strong></p>
  
  <pre><code>    document.addEventListener("deviceready", onDeviceReady, false);
  
     function onDeviceReady() {
          window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, fail);
     }
  
     function onFileSystemSuccess(fileSystem) {
          fileSystem.root.getDirectory("external_sd/Music", {
              create: false,
              exclusive: false
          }, getDirSuccess, fail);
      }
  
      function getDirSuccess(dirEntry) {
          // Get a directory reader
          var directoryReader = dirEntry.createReader();
          // Get a list of all the entries in the directory
          directoryReader.readEntries(readerSuccess, fail);
      }
  
      function readerSuccess(entries) {
          for (i = 0; i &lt; entries.length; i++) {
              $("#test").append("&lt;li&gt;" + entries[i].name + "&lt;/li&gt;");
              $("#test").listview("refresh");
          }
      }
  
      $("#test ul li").on("click", function (event) {
          alert($(this).text());
      }); //this code doesn't execute.
  
      function fail(evt) {
          console.log(evt.target.error.code);
          alert("some error occured");
      }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div data-role="page" id="albumspage"&gt;
  
      &lt;div data-role="header" data-position="fixed"&gt;
          &lt;h1&gt;MyApp&lt;/h1&gt;      
  
      &lt;/div&gt;&lt;!-- /header --&gt;
  
      &lt;div data-role="content"&gt;    
         &lt;ul id="test" data-role="listview" data-autodividers="true"&gt;                 
         &lt;/ul&gt;   
      &lt;/div&gt;
  
      &lt;div data-role="footer" data-position="fixed"&gt;
        &lt;h1&gt;footer&lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /footer --&gt;
  
   &lt;/div&gt;&lt;!-- /page --&gt;
  </code></pre>