Why click event handler doesn't work after sorting the table

Question

I'm using jQuery DataTables and I have a table which is generated using a foreach loop. In each row generated, 2 buttons are made with a different number added to a data attribute.

After the page loads, dataTables kicks in and renders the table. I have an onClick handler that responds to the buttons when clicked.

However, when I sort table columns that dataTables is capable of doing, the buttons simply do not respond to the onClick handler.

What can I do to prevent dataTables from causing the buttons to do nothing when either of the sorting columns are used?

Does this happen on all browsers?

Shaun
– Shaun

2015-05-31 18:20:35 +00:00
Commented May 31, 2015 at 18:20 — Shaun
– Shaun, Commented May 31, 2015 at 18:20

Senad Meškin · Accepted Answer · 2015-06-01 14:41:21Z

1

Do not use $('.button').click, because those buttons are recreated when sorted, instead use on jquery event

$(document).on('click', '.button',function(){
  //your code
});

edited Jun 1, 2015 at 14:41

answered May 31, 2015 at 18:21

Senad Meškin

13.8k4 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TechKat Over a year ago

This doesn't work. I'd like to mention I made a big change to my code. Instead of a foreach now, all the table row content is generated using DataTable's ajax option. The ajax PHP code generates the HTML buttons that loads into the table.

Senad Meškin Over a year ago

there is no way that this code doesn't works, use your selector, e.g. if your buttons got a class "test" then instead '.button' add '.test'

Gyrocode.com Over a year ago

Your code is incorrect because jQuery on() function requires parameters in the following order: event, selector, handler. Besides attaching event to document element is error prone, it's better to narrow it to table body, like $('#example tbody').

Senad Meškin Over a year ago

thnx for letting me know.

Gyrocode.com · Accepted Answer · 2015-06-28 23:42:02Z

1

You need to use delegated event handlers because your buttons most likely get recreated when table is redrawn.

Below is a sample code that you need to update to match your structure:

$('#example tbody').on('click', '.button', function(e){
   // your code
});

Replace example with ID attribute of your table and replace .button with appropriate CSS selector for your buttons.

See jQuery DataTables – Why click event handler does not work for more information.

edited Jun 28, 2015 at 23:42

answered Jun 1, 2015 at 2:22

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Collectives™ on Stack Overflow

Why click event handler doesn't work after sorting the table

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related