6

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?

3 Answers 3

17

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 );
});
Sign up to request clarification or add additional context in comments.

6 Comments

I used live but in firebug its showing this error "Resuming debugger: error during debugging loop: TypeError: firstViewRangeElement is null" (a || "").split is not a function
$Christian i'm using jquery-1.5.2.min.js
Might be a firefox/firebug issue, Google is your friend :) code.google.com/p/fbug/issues/detail?id=4348
Using this kind of event handler is the way to go. I might recommend using .delegate() in place of .live() but that's personal preference.
I've never actually used .delegate(), just checked it out and it seems to be the way to go. I'll be using it in the future instead of .live(), great tip!
|
0

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

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

Comments

-1

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>

1 Comment

.live() has been part of jQuery since 1.3, you do not need to load an external library. Also, datatables loads pages dynamically, so binding to the click event doesn't work with pagination. Finally, you should always wrap event handlers inside the document ready function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.