losing buttons event after adding rows
losing buttons event after adding rows
hello,
I have a simple table, not big. I want to be able to add rows in the middle of the table, for that I found some tips on the web.
I have some specific rows after which I can add a new row. As in this example https://jsfiddle.net/prtome/rgt84n7e/
The 2 + buttons are the ones to add the rows. If I click on the first + button, the row is added .for now I don't do much, the 2 buttons that paper remove the row. Works great.
But after that the bottom + button does not respond to click anymore. If I begin with the bottom button, it works, and I can use the top one (and then not the bottom anymore)
I understand this is a problem of the internal datatable indexing.
Is there any way I can reset the table to its original state ? I tried calling destroy() and then again dataTable on the table, but the result is still the same , the buttons don't respond.
The table will never be big, and adding rows will be done very infrequently so cost is not an issue.
My other solution is recalling the whole function that does the database call to the server and recreates everything, but I would like to have a client only solution if it is possible
Any idea of what I can try ?
Thanks
This question has an accepted answers - jump to answer
Answers
I would suggest you use delegate events. You have done for the
'tr:not(:has(th))'
event listener - I would suggest you do so for thetr_add
and also the save and delete methods as well. You'll run into problems with paging if you don't aside from anything else.Allan
Thanks Allan
Ma solution for now is https://jsfiddle.net/prtome/rgt84n7e/2/
I have to look at the event listener, I am not that good on JS - I am more a DB person so I still lack some knowledge.
on Paging side, since that table will never grow that much, I can block the number of lines in the page and prevent paging - which would solve the problem ;) thanks for pointing that out
Pat
another thank you, now I understand delegate events much better, and everything is working as I like it ;) https://jsfiddle.net/prtome/rgt84n7e/3/