Question

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?

Here is my code

HTML:

<div class="container">
    <label>Name</label>
    <input type="text" class="name" name="name" />
    <input type="button" class="addBtn" name="add" value="Add" />
</div>
<div class="contents"></div>

jQuery:

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

$('.delete').click(function() {
    console.log('click');
});

Answer 1

A better way to do this would be to use the on() function:

$('.addBtn').on('click', function() {
    var name = $('.name').val();
    var contents = $('.contents');
    var div = $('<div class="names"></div>');
    div.append(name).append("<button class='delete'>X</button>");
    contents.append(div);
    $('.name').val('');
});

$(document).on('click', '.delete', function() {
    console.log('click');
});​

Demo: http://jsfiddle.net/tSTEK/7/