Jquery click does not work for dynamicly generated id

Question

I have a textbox where if you enter and click the button, it will generate a checkbox with a "delete text".

I wonder why my click function does not work, it does not do any thing at all. smtg like this:

$( "#addMemberEmail" ).click(function() {
    if(jQuery.trim($('#mListMemberEmail').val()).length > 0) {
        var checkboxId = "checkbox_" + $('#mListMemberEmail').val(); 
        var checkbox = '<tr><td><input type="checkbox" id="' + 
                         checkboxId + '" value="' + $('#mListMemberEmail').val() + 
                         '" checked/></td><td>' + $('#mListMemberEmail').val() + 
                         '</td><td><div class="btndel" id="abc">delete</div></td></tr>';
        $('#group').append(checkbox);

        //reset textbox
        $('#mListMemberEmail').val('');
    } else {
        alert("Please enter an email address");
    }
});

//why this is does not work?
$( ".btndel" ).click(function() {  
    alert("Aaa");
});

I create the jsfiddle here:

http://jsfiddle.net/vABvy/39/

It would be great if you could also show me for the delete function. It's supposed to be if you click the delete button, it remove the checkbox depend on which delete button is clicked.

Answer 1

go for

$(document).on("click",".btndel", function() {  
    alert("Aaa");
});

to circumvent any problems with the proper linking to elements, which may not be present at the DOM by the time the script tries to link