click event doesnt get clicked in javascript
<p>I am having problem with jquery click event. Here is what my app does. User enters names in textfield. when he he clicks on add button then that name appears in contents div tag. This name also has a delete button. Now the problem is when user clicks on delete button it does not give any response. So how can I make this work?</p>

<p>Here is my <a href="http://jsfiddle.net/tSTEK/" rel="nofollow">code</a></p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div class="container"&gt;
    &lt;label&gt;Name&lt;/label&gt;
    &lt;input type="text" class="name" name="name" /&gt;
    &lt;input type="button" class="addBtn" name="add" value="Add" /&gt;
&lt;/div&gt;
&lt;div class="contents"&gt;&lt;/div&gt;
</code></pre>

<p><strong>jQuery:</strong></p>

<pre><code>$('.addBtn').click(function() {
    var name = $('.name').val();
    var contents = $('.contents');
    var div = $('&lt;div class="names"&gt;&lt;/div&gt;');
    div.append(name);
    div.append("&lt;button class='delete'&gt;X&lt;/button&gt;");
    contents.append(div);
    $('.name').val('');
});

$('.delete').click(function() {
    console.log('click');
});
</code></pre>
