title: jQuery Mobile click events on dynamic list items
body: <p>I'm having trouble getting click events from list items.  In this page:</p>
  
  <p><a href="http://bec-systems.com/list-click.html" rel="nofollow">http://bec-systems.com/list-click.html</a></p>
  
  <p>The first the entries in the list fire click events.  However, if I dynamically add 3 more events by pushing the "Refresh Update List" button, the next 3 list entries do not generate click events.  </p>
  
  <p>Appreciate any suggestions as to how I can make this work, or generally improve the code.</p>
  
  <p>Thanks,
  Cliff</p>
  
  <p>Code is also listed below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
      &lt;head&gt; 
      &lt;title&gt;Status&lt;/title&gt; 
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
    &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
    $("#refreshUpdateButton").on("click", function(event, ui) {
      console.log("refreshUpdateButton")
  
      versions = ["0.3", "0.4", "0.5"]
  
      for (var i=0; i &lt; versions.length; i += 1) {
        $("#updateVersionsList").append('&lt;li&gt;&lt;a id="updateVersionItem-' + (i+3) + '"&gt;' + versions[i] + '&lt;/a&gt;&lt;/li&gt;');
        if ($("#updateVersionsList").hasClass('ui-listview')) {
          $("#updateVersionsList").listview("refresh");
        } else {
          $("#updateVersionsList").trigger('create');
        }
      }
  
    })
  
    $('[id^=updateVersionItem]').on("click", function(event, ui) {
      console.log("updateVersion, selected = " + $(this).attr('id'));
    })
  
  });
  
    &lt;/script&gt;
  &lt;/head&gt; 
  &lt;body&gt; 
  
  &lt;!-- Software update page --&gt;
  &lt;div data-role="page" id="software-update-page"&gt;
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Software Update&lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
      &lt;div data-role="content"&gt;   
      &lt;h1&gt;Select Software version:&lt;/h1&gt;
      &lt;ul data-role="listview" id="updateVersionsList"&gt;
        &lt;li&gt;&lt;a id="updateVersionItem-0"&gt;0.0&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="updateVersionItem-1"&gt;0.1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="updateVersionItem-2"&gt;0.2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;br&gt;
      &lt;a data-role="button" class="ui-btn-left" id="refreshUpdateButton"&gt;Refresh Update list&lt;/a&gt;
      &lt;/div&gt;&lt;!-- /content --&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>