Cannot read property '_aData' of undefined(…) - Datatables

Question

I'm trying to read data() from a cell in a datatable which has a button inside it, but I'm getting en error.

This is my Datatable definition:

$("#example").DataTable({
                destroy: true,
                "columnDefs": [{
                    orderable: false,
                    targets: 0
                }],
                "columns": [
                    {
                        "data": "slno",
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            $(nTd).html('<a href="AddNewTicket.aspx?subjectID=' + oData.subjectID + '&subject_id=' + oData.subject_id + '&serviceID=' + oData.crm_services_id + '&severityID=' + oData.severityID + '&statusID=' + oData.statusID + '&callerID=' + '66355356' + '">' + oData.slno + '</a>');
                        },
                    },
                    { "data": "status_message" },
                    { "data": "crm_services_id" },
                    { "data": "subject_id" },
                    { "data": "severity_id" },
                    {"data": "user_id" },
                    { "data": "status_id" },
                    {
                        "data": "caller_number",
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            $(nTd).html('<button class="btn btn-primary" id= "' + oData.subjectID + '">Call Customer</button>');
                        },
                    }
                ],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                "data": response,
                "sDom": '<"top">tip'
            });

And here is where I'm trying to fetch the data:

var table = $("#example").DataTable();
        $('#example tbody').on('click', 'button', function () {
            var subjectID = $(this).attr('id');
            var thisData = table.row($(this).parents('tr')).data();
            var userID = thisData[7];
            sendCallRequest(subjectID, userID);
        });

Here is the error I'm getting:

Cannot read property '_aData' of undefined(…)

Any suggestions please?

Answer 1

Try unbinding the event for your buttons before you re-assign them:

var table = $("#example").DataTable();

    $('#example tbody').off('click');

    $('#example tbody').on('click', 'button', function () {
        var subjectID = $(this).attr('id');
        var thisData = table.row($(this).parents('tr')).data();
        var userID = thisData[7];
        sendCallRequest(subjectID, userID);
    });

Why am I suggesting this: I have a pretty similar problem, where DataTables is not able to call the rowReorder event. I also create my table via AJAX / dynamically (which you seem to do aswell), so obviously my event listener (in my case for table.on('row-reorder')) was bound multiple times. After first removing the event listener and readding it, finally I got this to work.