Attaching events to Checkbox Dynamically

jQuery Mobile

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>


<div class="form-group">
    <label for="mListMemberEmail" class="col-sm-4 col-md-3 control-label">Enter Email Member</label>
    <div class="col-sm-8 col-md-5 col-lg-4">
        <input type="text" maxlength="32" id="mListMemberEmail" name="mListMemberEmail" size="40" class="form-control"/>
    </div>
    <button type="button" id="addMemberEmail" class="btn btn-primary">Enter Member</button>
</div> 

<div class="form-group">                                
    <table data-role="controlgroup" id="group">
    </table>      
</div>

JavaScript

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