Javascript Jquery单击不适用于动态生成的id

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

我想知道为什么我的点击功能不起作用，它根本不起任何作用。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");
});

$（“#添加成员电子邮件”）。单击（函数（）{
if（jQuery.trim（$（'#mListMemberEmail'）.val（））.length>0）{
var checkboxId=“checkbox”+$（'#mListMemberEmail'）.val（）；
var checkbox='+$（'#mListMemberEmail'）.val（）
“删除”；
$（“#组”）.append（复选框）；
//重置文本框
$（'mListMemberEmail'）.val（''）；
}否则{
警报（“请输入电子邮件地址”）；
}
});
//为什么这是行不通的？
$（“.btndel”）。单击（函数（）{
警报（“Aaa”）；
});

我在这里创建JSFIDLE：

如果你能给我看一下删除功能，那就太好了。 如果您单击“删除”按钮，它将删除复选框，具体取决于单击了哪个“删除”按钮。

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

避免正确链接到元素的任何问题，这些元素在脚本尝试链接时可能不在DOM中