event listener in Child rows (show extra / detailed information) not working for external ajax calls

jamesrajkumar.ramnad

question is related to the below data table option.
https://datatables.net/examples/api/row_details.html

I am getting the source data for the data table from ajax call. Then build the table as given in the code below.
I am not getting the event listener for tbody.

I tried to put event code inside ajax success block, now I get the event listener for tbody but not able to click the icon.

<

script>

/* Formatting function for row details - modify as you need */

function format ( d ) {
console.log("i am called")
// d is the original data object for the row
return '

'+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ '

Full name:	hello
Extension number:	hi
Extra info:	And any further details here (images etc)...

';
}

$(document).ready(function() {
//ajax3
$.ajax({
//check
url:'my api url',
type:'GET',
dataType:'json',
success: function(data){

for(var i=0;i<data.length;i++){
var user= data[i].userName;
drawRow(user,data[i].admin);
}

    $('#excelDataTable').DataTable({

      "sDom": 'lf<"clear">tip'
      });

}
})

// Add event listener for opening and closing details
$('#excelDataTable tbody').on('click', 'td.details-control', function () {
console.log(" ")
var tr = $(this).closest('tr');
var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

});

function drawRow(rowData1,rowData3) {
var row = $("<tr />")
$("#excelDataTable").append(row);
row.append($("<td class=details-control></td><td class=sorting_1> <input type=checkbox class=chkNumber value="+rowData1+"> " + rowData1 + "</td>"+ "<td>" + rowData3 + "</td>"));

}
</script>
<style >

  td.details-control {
background: url('details_open.png') no-repeat center center;
cursor: pointer;

}

tr.shown td.details-control {
background: url('details_close.png') no-repeat center center;
}

</style>

	Existing Users	Admin Type