Element Not Detecting Click Event

I am generating HTML dynamically through javascript and have 2 glyphs enclosed within a table cell. The pencil glyph responds correctly however my code for the delete does not and

Solution 1:

Use .on().

$(document).ready(function(){
    $(document).on('click', '#delete-dp', function (event) {
        alert('pressed');
        //add the datapoint ID to the array to be serialised to JSON and then stored in a html hidden field
        deletedDatapoints.push($(this).data('id'));
    });
});

You could scope it to the closest parent that is not dynamically generated to be more efficient than document.

Solution 2:

To handle dynamicly added events use

$('#delete-dp').on('click',function(event){
    //do your stuff
});