Can't Select Table Rows for New Rows Only
Can't Select Table Rows for New Rows Only
[Deleted User]
Posts: 0Questions: 0Answers: 0
Hi, I've seen some discussions on here regarding this but not exactly matching my situation that I could find.
I'm adding new data to the table by using fnAddData() dynamically. The the new row of data is added correctly to the table, however I'm not able to select the row by clicking on it. All table rows that were not dynamically added are still selectable.
I have the following code that toggles the table rows if they are selected or not. Keep in mind I'm allowing for multiple rows to be selected.
Any suggestions on how to resolve this would be greatly appreciated as I can't seem to locate the issue. I've even tried placing an alert() within the click event below and the alert() is never executed when trying to click (select) on the dynamically added table rows.
$('#example tr').click( function() {
$(this).toggleClass('row_selected');
} );
Here is the code used for toggling selected table rows and the dynamic code that adds new data to the table.
https://gist.github.com/thewarden/cdcbaee26cc244fe3049
Here is my DataTables debug.
http://debug.datatables.net/eyotid
I'm adding new data to the table by using fnAddData() dynamically. The the new row of data is added correctly to the table, however I'm not able to select the row by clicking on it. All table rows that were not dynamically added are still selectable.
I have the following code that toggles the table rows if they are selected or not. Keep in mind I'm allowing for multiple rows to be selected.
Any suggestions on how to resolve this would be greatly appreciated as I can't seem to locate the issue. I've even tried placing an alert() within the click event below and the alert() is never executed when trying to click (select) on the dynamically added table rows.
$('#example tr').click( function() {
$(this).toggleClass('row_selected');
} );
Here is the code used for toggling selected table rows and the dynamic code that adds new data to the table.
https://gist.github.com/thewarden/cdcbaee26cc244fe3049
Here is my DataTables debug.
http://debug.datatables.net/eyotid
This discussion has been closed.
Replies
Allan
I've updated the code example I provided to include all the code with exception to datatables.mini.js.
https://gist.github.com/thewarden/cdcbaee26cc244fe3049
Could you be more specific as to what I'm not seeing or missing to make this functional?
Live watches the dom for new elements as they are created (bubble up) whereas click binds only to existing elements. i.e. not to the rows you add after the fact.
Excellent discussion here:
http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html
You want to change:
> $('#example tr').click( function() {
to
[code]
$('#example tbody').on( 'click', 'tr', function () {
[/code]
Allan
The article linked explains that and shows that the .on method is actually used for all of the
.bind .live and .delegate methods.