javascript - Element not detecting click event -

this question has answer here:

• event binding on dynamically created elements? 19 answers

i generating html dynamically through javascript , have 2 glyphs enclosed within table cell. pencil glyph responds correctly code delete not , not sure why.

this rendered html

<span id="edit-dp" class="glyphicon glyphicon-pencil" data-action-url="/settings/getdatapoint" data-id="3"></span> <span id="delete-dp" class="glyphicon glyphicon-trash" data-id="3"></span> 

and here javascript code tie event element.

$(document).ready(function(){   $('#delete-dp').click(function (event) {       alert('pressed');       //add datapoint id array serialised json , stored in html hidden field       deleteddatapoints.push($(this).data('id'));   }); }) 

use .on().

$(document).ready(function(){     $(document).on('click', '#delete-dp', function (event) {         alert('pressed');         //add datapoint id array serialised json , stored in html hidden field         deleteddatapoints.push($(this).data('id'));     }); }); 

you scope closest parent not dynamically generated more efficient document.