multiple click events on datatable

jbblake

I am loading a datatable using editor. The results are filtered by drop downs. I have found that each time a load the table the click event fires an addition time. That is the event is firing on the previous data table.
This causes an error if a previously loaded table has zero rows.
The simplest fix would be to force the event to use the "current/last" table loaded. I would prefer to destroy/invalidate the previous table on a reload. I tried using invalidate rows but it is not working. I may have it in the wrong place in the code. My click event and datatable code is below

    $('#editDetails tbody').on('click', 'td' ,'tr' , function () {
        console.log("Single click");
        console.log(this);
        //error here if previous table has zero rows
        var rowData = table.row(this).data();
        console.log("row data");
        console.log(rowData);
...
// datatable
    var table = $('#editDetails').DataTable({
        destroy: true,
        dom: "Bfrtip",
        // tony add
        language: {
            emptyTable: "There are no forecasts matching the selected parameters.",
            zeroRecords: "There were no matching forecasts found."
        },
        searching: true, // <-- this should be set to true
        ordering: true, // <-- this should be set to true
        paging: true, // <-- this should be set to true
        pageLength: 25,
        //"fixedHeader": true,
        //scroll not compatible with fixed header
        scrollX: true,
        bScrollInfinite: true,
        bScrollCollapse: true,
        scrollY: 550,
        deferRender: true,
        scroller: true,
        // end tony add
        ajax: {
            url: apiurl,
            dataSrc: ''
        },
        // setting keys true here breaks keys in the bubble
        //keys: true,
        //scrollY: "500px",
        //scrollCollapse: true,
        //paging: true,
        columns: [
            { data: "ForecastEntryID"},
            { data: "SalesPersonName" },
                { data: "ParentCompany" },
                { data: "SoldTo_CustomerName" },
                { data: "SoldTo_City" },
                { data: "EndUser_CustomerName" },
                { data: "ShipToCountryName" },
                { data: "ShipTo_CustomerName" },
                { data: "FrequencyType" },
                { data: "Corp3InternalGrade" },
                { data: "ProductBrand" },
                { data: "HarmonizedGrade" },
                { data: "BasisWeightValue" },
                { data: "BasisWeightUOM" },
                // Display Roto as Yes/No rather than true/false
                    //{
                    //    mRender: function (data, type, row) {
                    //        return row.Roto ? "Yes" : "No"
                    //    }
                    //},
                { data: "Roto" },
                { data: "PlantPart2Name" },
                { data: "STorMT" },
                { data: "Year" },
                { data: "January" },
                { data: "February" },
                { data: "March" },
                { data: "April" },
                { data: "May" },
                { data: "June" },
                { data: "July" },
                { data: "August" },
                { data: "September" },
                { data: "October" },
                { data: "November" },
                { data: "December" },
                {
                mRender: function (data, type, row) {
                    return parseInt(row.January) + parseInt(row.February) + parseInt(row.March) +
                        parseInt(row.April) + parseInt(row.May) + parseInt(row.June) +
                        parseInt(row.July) + parseInt(row.August) + parseInt(row.September) +
                        parseInt(row.October) + parseInt(row.November) + parseInt(row.December);

                    }

                    //Months sum
                    //mRender: function (data, type, row) {
                    //    return Math.round(row.January + row.February + row.March + row.April + row.May + row.June + row.July + row.August + row.September + row.October + row.November + row.December);
                    //}
                }

        ],
        select: true,
        buttons: [
            { extend: "edit", editor: localEditor }
        ]
    });
    table.rows().invalidate().draw();

jbblake

I was able to solve the multiple click event. It took some more searching
$('#editDetails tbody').off('click').on('click', 'td' ,'tr' , function () {

allan

Yup - it looks like you are calling the jQuery.on method every time you did a filter. That would indeed result in creating multiple event handlers. Using jQuery.off is one way to handle that.

Allan