title: Append <li> element to <ul> and add click event for each?
body: <p>I'd like to add a series of <code>&lt;li&gt;</code> elements to a <code>&lt;ul&gt;</code>, and add a click event to each one, programmatically.</p>
  
  <p>I'm not sure how to do this, at least not in a neat, jQueryish way. </p>
  
  <p>This is my existing code:</p>
  
  <pre><code>&lt;ul id="saved-list"&gt;&lt;/ul&gt;
  &lt;script type="text/javascript"&gt;
  $.each(all_objects, function() {{
      var list_route = "&lt;li&gt;&lt;a href='#saved-route'&gt;" + this.text + "&lt;/a&gt;&lt;/li&gt;";
      $('#saved-list').append(list_route);      
      // add unique id (this.id) to item and click event here?
      // pseudocode - onclick: alert(this.id);
  });
  $('#saved-list').refresh('listview'); // jquery mobile list refresh
  &lt;/script&gt;
  </code></pre>
  
  <p>Please could someone advise how to add a click event to each list item programmatically?</p>
  
  <p>UPDATE: I need to do something slightly different for each list item (let's just say an alert) - apologies for not making this clear. </p>