.click doesn't seem to respond to elements added with jQuery

.click doesn't seem to respond to elements added with jQuery

I'm working on creating a little suggestion/autocomplete code for form fields.

Here is the code I currently have written:
$(document).ready(function() {
   $("#city").keyup(function() {
      $.getJSON("http://iburris.ath.cx/autosuggest/city/"+$("#city").val(), function(data) {
         if (data == "") {
            $("#results").css("display", "none");
         } else {
            results = "<ul>";
            $.each(data, function(i, item) {
               results += "<li class=\"autosuggest_results_item\" title=\""+item.city+", "+item.state+"\">"+item.city+", "+item.state+"</li>";
            });
            results += "</ul>";
            $("#results").html(results);
            $("#results").css("display", "block");
         }
      });
   });
   
   $(".autosuggest_results_item").click(function() {
       $("#city").val($(this).attr("title"));
    });
});


Now if I just put in my html something like:
<li class="autosuggest_results_item" title="foo">Foo</li>


Everything works fine and when I click on the text Foo the form field value is set to foo. But, when I try clicking on a word added to the page by the keyup part of my code above it doesn't work. Even though if you look at the source everything is the same. Hopefully you guys understand my problem. If not ask for clarification and I'll do my best to answer your questions. Thanks for your help.