Getting an event

scotty2540

I can't figure this out (actually I can't figure a bunch of stuff out... But this one I can quantify)

Given this code, which I copied *directly* from the example page on row selecting (and made small changes):
[code]
var recoTable;
$(document).ready(function() {
recoTable = $('#reco_id_list').dataTable( {
"bProcessing" : true,
"sAjaxSource": "http://localhost:5984/somelocal/data",
"oLanguage": {"sLengthMenu": "Display _MENU_ per page",
"sZeroRecords": "No entries to display", "sInfo": "Showing _START_ to _END_ of _TOTAL_ ",
"sInfoEmpty": "Showing 0 to 0 of 0 ","sInfoFiltered": "(filtered from _MAX_ total )" },
});


$("#reco_id_list tbody tr").click(function(event) {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
} else {
recoTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});
} );
[/code]
I *NEVER get an event when clicking the row,

However, all I have to do is remove the 'sAjaxSource'setting and it works. (well, it doesn't... It crashes later with "Object [ object Object] has no method '$' ", but that's another thing I can't figure out and probably requires a different post asking for help on that completely useless error message)

Alternately, I can change the click handler to $("#reco_id_list tbody").click and get the event. (But it still crashes later as indicated )

Why would the ajax source make it break?
What is the difference between $("#reco_id_list tbody") and $("#reco_id_list tbody tr") ?

-Scott

allan

http://datatables.net/faqs#ss_events :-). Use a delegated event - basically you are adding static event events to the elements in the table when that code runs, but it runs before the data has loaded! (the "async" part of Ajax):

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

Should do it.

Allan

scotty2540

WHEW!! It worked.
I had been adding grey hair for days trying to understand what the differences are.

Thanks.