CODEWITHSUNDEEP
javascriptjquerydatatables
Arasu
Arasu

Reputation: 2148

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

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?

Upvotes: 6

Views: 8337

Answers (3)

krissanawat
krissanawat

Reputation: 626

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

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

Upvotes: 0

Christian
Christian

Reputation: 19750

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

Upvotes: 17

Tricks By Sam
Tricks By Sam

Reputation: 478

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>

Upvotes: -1

Related Questions