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?

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?

• javascript
• jquery
• datatables

3 Answers 3

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 );
});

I stuck same you when try to bind inline event it's work

 onclick="$('#dataConfirmOK').attr('href',$(this).attr('url'))"

If live extension is not working then you can add live extension plugin additionaly. http://plugins.jquery.com/files/live-extension.js_4.txt

It is preferable if you bind the "Click event" of next page items when they load. Please load the code below in each time the page load. and also define the function "click_function_to_call".

<script type="application/javascript">
  $("#example tbody td.delete").click(click_function_to_call);
</script>