Can't Select Table Rows for New Rows Only

[Deleted User]

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

allan

Top FAQ: http://datatables.net/faqs#events :-)

Allan

[Deleted User]

I have reviewed this entry in the FAQ and I'm not seeming to understand how this applies let alone what you are referring to resolve this problem. I went to http://datatables.net/examples/advanced_init/events_pre_init.html and http://datatables.net/examples/advanced_init/events_post_init.html but I didn't see anything I didn't already have in my code. The extra code if I understand correctly is not required nor is it necessary in my case.

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?

psharp

@thewarden you will most likely want to change your "click" event to "live".
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

allan

Note that $().live() is deprecated in jQuery 1.7 and removed in 1.9. You want to use $().on() now.

You want to change:

> $('#example tr').click( function() {

to

[code]
$('#example tbody').on( 'click', 'tr', function () {
[/code]

Allan

psharp

D'oh, and I knew that! Should have clarified that in the beginning :)

The article linked explains that and shows that the .on method is actually used for all of the
.bind .live and .delegate methods.

[Deleted User]

Thanks for your replies. Allan, your solution worked perfectly. It should be noted in case anyone else comes across this that jQuery v1.7+ is required for $().on() support (http://api.jquery.com/on/).