DataTable jquery tr & td selectors not firing

snijsure

I had asked this question originally on stackoverflow:
( http://stackoverflow.com/questions/26434632/datatable-jquery-selectors-not-firing?noredirect=1#comment41514233_26434632 )

But thought someone here may provide better answer in context of DataTables. I am using version 1.10.2

I have following code to handle clicks on row or individual cells.

$(document).ready(function() {
    var JSON_URL = '{% url "technician_activity" %}';
    var oTable = $('#technician_activity').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": JSON_URL ,
        "jQueryUI":       true
    } );
    alert("Without this alert selectors don't work? oTable = " + oTable);
    oTable.$('tr').click( function () {
       var data = oTable.fnGetData( this );
       alert("Column " + data);
    });
    oTable.$('td').click( function () {
       var data = oTable.fnGetData( this );
       alert("Cell " + data);
    });

});

One thing that puzzels me is without the first alert statement

alert("Without this alert selectors don't work? oTable = " + oTable);

selectors for tr and td don't work this is very puzzling to me -- what is the difference that this alert() is making?

allan

The alert() is blocking - so without what is happening is that the static event listener you are using is being immediately applied to the table, but there are no rows in the table at that point (recall what the first A in Ajax means :-) ).

The alert() is blocking, so when you have that in the code, the Ajax request has been able to be answered by the server and there are rows in the table.

I would suggest using delegated events, link in this example.

Allan