jQuery selecting list items
<p>I'm having trouble seeing what's wrong with my code. I'm trying to select my list items, but they don't seem to get selected.</p>

<p>Here's my HTML</p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;title&gt;Tasklistr&lt;/title&gt;
    &lt;style type="text/css"&gt; @import url(styles.css);&lt;/style&gt;
    &lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="application.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h1&gt;JSTasker&lt;/h1&gt;

  &lt;form&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Add a Task&lt;/legend&gt;
      &lt;input type='text' name='task_text' id='task_text' /&gt;
      &lt;input type='submit' name='add_button' value='Add' id='add_button' /&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;

  &lt;div id='tasks'&gt;
      &lt;h2&gt;Your Tasks &lt;/h2&gt;
      &lt;ul&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>My application.js</p>

<pre><code>$(document).ready(function() {
    $('input#add_button').click(function(event) {
        event.preventDefault();
        var task_text = $('input#task_text').val();
        var task_item = "&lt;li&gt;&lt;p&gt;" + task_text + "&lt;/p&gt;&lt;/li&gt;"
        $('div#tasks ul').append(task_item);
        $('input#task_text').val(null);
    });

    $('input#task_text').focus();

    $('div#tasks ul li').click(function() {
        alert("Hey");
    });



});
</code></pre>
