How to enable cell clicks in dynamically-created table?

kgeffert

I have a table that is populated with a different structure depending on which type of data the user needs to see. the table is created and populated correctly using ajax/json and upon initialization, I even have the dynamic footer columns enabled with keyup to apply column filtering/searching. What I can not get to work is capturing a click on a data cell--and this is a crucial feature of my implementation. I have used the following code on "hard coded" datatables, but it doesn't work on my dynamic table:

$(document).ready(function() {
    var table = $('#example').DataTable();
   
   
 //clicking a data cell
   $('#example tbody').on( 'click', 'td', function () {
alert('clicked');
});

Here is the code I am using to generate the dynamic table

$.ajax({
        "url": "./reconReportsServlet?study="+getStudy()+"&repname="+picked+"&id=0",
        "success": function(json) {
         
            var tableHeaders;
            var tableFooters;
            $.each(json.columns, function(i, val){
                tableHeaders += "<th>" + val + "</th>";
                tableFooters +="<th><input type='text' placeholder='Filter'"+ val + "/></th>";
                Columns.push(val);
            });
              
            $("#tableDiv").empty();
            $("#tableDiv").append('<table id="example" class="display" cellspacing="0" width="100%"><thead><tr>' + tableHeaders + '</tr></thead><tfoot><tr>'+tableFooters+'</tr></tfoot></table>');
             
        
            $('#example').dataTable({
                "bprocessing":true,
                "deferRender":true,
               data:   json.data,
               "search":
                    {
                        "search": "",
                        "regex" : true,
                        "smart": false
                        
                    },
                    "scrollX":"true",//"scrollY":600,
                    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                            
                      buttons:[
                        {
                            extend: 'excel',
                            exportOptions: 
                            {
                         columns: [  1,2,3,4,5,6,7,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27]
                            }
                        },
                        'colvis'], 
                        "initComplete": function () {
                                            
                            
                            var api = this.api();
                          
                            api.buttons().container() .insertBefore( '#example_filter' );
                          //add the editable icons to the column headers
                            var title = api.column(2).header();
                             $(title).html('<div class="DataTables_sort_wrapper"><i id="ActChgd" class="fa fa-pencil-square-o"></i>ACTION_TO<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>');
                             title = api.column( 5 ).header();
                            
                            
                             
                             $(title).html('<div class="DataTables_sort_wrapper"><i id="dmChgd" class="fa fa-pencil-square-o"></i>DM_COMMENT<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>');
                             title = api.column(6).header();
                             $(title).html('<div class="DataTables_sort_wrapper"><i id="extChgd" class="fa fa-pencil-square-o"></i>EXT_COMMENT<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>');
                             title = api.column(7).header();
                             $(title).html('<div class="DataTables_sort_wrapper"><i id="qryChgd" class="fa fa-pencil-square-o"></i>QUERY_TEXT<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>');
                            //apply the search
                            
                            api.columns().every( function () {
                                 var that = this;

                                 $( 'input:text', this.footer() ).on( 'keyup change', function () {
                                     if ( that.search() !== this.value ) {
                                         that
                                         .search( this.value,true,false,true )
                                             .draw();
                                     }
                                 } );
                             } );
},
            });
            
        },
        "dataType": "json"
    });

do the click events need to be put in the initcomplete function and if so, how is it done?