javascript - Jquery click 不适用于动态生成的 id

Question

我有一个文本框，如果您输入并单击按钮，它将生成一个带有“删除文本”的复选框。

我想知道为什么我的点击功能不起作用，它根本没有做任何事情。 smtg 像这样:

$( "#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");
});

我在这里创建 jsfiddle:

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

如果您也能向我展示删除功能，那就太好了。 应该是，如果您单击删除按钮，它会根据单击的删除按钮删除复选框。

Answer 1

去

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

避免正确链接到元素时出现的任何问题，当脚本尝试链接时元素可能不存在于 DOM