JQuery onclick event isn't recognizing in JQuery datatable from second page

Question

I have JQuery Datatable and I want to delete row, when delete link is clicked. It's working fine for first 10 rows, i.e. for the first page. When I move to any another from the pagination. It's not working. Here is my code:

$("#example tbody td.delete").click(function(event) {
                var row = $(this).closest("tr").get(0);
                oTable.fnDeleteRow( row );
    });

All last td of a row has class "delete".

What should I do to work for all the pages or for all the records?

Answer 1

If you're using jQuery 1.7 or older, you'll need to use the live event handler instead, as subsequent pages are added dynamically.

$('#example tbody td.delete').live('click', function(event) {
    var row = $(this).closest('tr').get(0);
    oTable.fnDeleteRow( row );
});

jQuery .live()

EDIT:

It looks like people are still using this answer, so to update it with the latest best practices, DO NOT use .live(). Live was deprecated in 1.7 and removed in 1.9. Instead, use the .on() handler. This can handle delegated events by binding the event to a parent element, and using the actual element you want to target as the optional selector parameter. To put it to use in the above example, it would look like so:

$('#example tbody').on('click', 'td.delete', function(event) {
    var row = $(this).closest('tr').get(0);
    oTable.fnDeleteRow( row );
});