Child rows not working after the first opening and closing

avokado1337

http://live.datatables.net/hafesume/1/edit?html,css,js,console,output

Basically I need to be able to click on row on the main table and after that child table will be initialized, child table will have a child rows.
I need to reinitialize the child table every time a user chooses over row in the main table.
It works fine for the first row but if I try to choose other row and click on the open button it does nothing, but in the console it outputs test messages.
If I click on different rows in the main table again and again and then click on the open child rows of child table it will multiply the number of test messages for some reason. I believe there's some kind of recursive call in the code but can't exactly find where. I did try to destroy the table but it seems not to be the problem.

kthorngren

Not sure why but your test case wasn't running properly. I fixed the HTML tab so it loads properly. The problem is when your $('#example tbody').on('click'...) click event executes it creates a new child click event $('#child tbody').on('click'....). The second time you now have two child click events which cause the child row to open then immediately close. one option is to use .off() to turn off the click event before creating the new click event, like this:
http://live.datatables.net/hafesume/2/edit

Or you can move the child click event outside the parent click event and create it only once.

Kevin

avokado1337

Thank you, it solved the problem.