Question

My code creates dynamically a table using jquery. I want to add delete functionality to the table. So when clicking on delete image the row should be delete. But deleting works fine just when the table is static.
here id my code:

createTable: function () {
    var lastRow = $('#TblInvoiceList tr:last');
    var newRow = $('<tr>');
    newRow.append($('<td>').text($('input.Name').val()), $('<td>').text($('input.GrossAmount').val()));
    newRow.append("<td class='center'><img class='ImgDelete' src='image/ButtonDelete.png' /></td>");
    lastRow.before(newRow);}

and this is the delete function:

$('#TblInvoiceList td img.ImgDelete').click(function () {
    alert("hi");
    $(this).parent().parent().remove();
});

Answer 1

Use delegate even more efficient than live for dynamic added content do:

$('#TblInvoiceList').delegate('img.ImgDelete', 'click', function(e) {
     alert("hi");
     $(this).parent().parent().remove();
});