I can see this question asked several times in this forum, however, I have not been able to find a solution that works for me. I realize there are different solutions for ajax and non ajax data. I have tried both ways but unfortunately, neither appears to solve my problem.

I have a DataTable called skiTable. It consists of rows of ski mountains. In each row, there is a button called FlyTo with latitude and longitude (aa_x, aa_y). When clicked, it zooms into the ski mountain using mapbox gl js (map.flyTo). Once the map is zoomed in, map.on('moveend', ...) is triggered which in turn gets the new data with getUniqueFeatures() and returns data to datatable of just the displayed mountains in aDemoItems. Sometimes there can be surrounding mountains and therefore the row count, after zooming in, can be anywhere from 0 mountain to 203 mountains but the error, Cannot read properties of undefined (reading 'properties') in $('#ski_index tbody').on( 'click', 'button', function () {} occurs when I zoom in and the datatable is recreated.

map.on('moveend', 'aa_winter_spoorts_points', (e) => {
     const uniqueFeatures = getUniqueFeatures(featuresRendered, 'id');
     let skidata = JSON.stringify(uniqueFeatures);
     var aDemoItems = uniqueFeatures;
     let skiTable = $('#ski_index').DataTable({
                stateSave:      true,
                stateDuration:  60 * 60 * 48, // save the state for 2 days.
                responsive:     true,
                info:           true,
                destroy:        true,
                //retrieve:       true,
                data:           aDemoItems,
                // I have also tried with ajax and $('#ski_index').DataTable().ajax.reload(); in the below click handler
                 //ajax:           function(data, callback) {
                 //                   callback({ data: aDemoItems })
                 //              },
                dataType:       'json', 
               "columns": [
                    //0
                    {
                        data: null,
                        "defaultContent": "<i>Not set</i>",
                        render: function (data, type, row){
                            //console.log(row.properties.aa_y);
                            return '<button>FlyTo!</button>'    
                        }
                    },
                   // snipped all the other columns to read easier.
                    ]   
            });
     $('#ski_index tbody').on( 'click', 'button', function () {
                var aa_Latitude = skiTable.row( $(this).parents('tr') ).data().properties["aa_x"];
                var aa_longitude = skiTable.row( $(this).parents('tr') ).data().properties["aa_y"];
                console.log(aa_Latitude + ', ' + aa_longitude);
                // is case of ajax, have tried:  $('#ski_index').DataTable().ajax.reload(); but the error is 
                // Cannot read properties of undefined (reading 'properties')

                // in case of non ajax, I have tried below with same error.
                $('#skiTable').DataTable().clear().destroy();
     }

Here is some debugger info:

Information about 1 table available
#ski_index
Data source:    Ajax (( as said above have tried ajax and non ajax methods)
Processing mode:    Client-side
Draws:  2
Columns:    11
Rows - total:   203
Rows - after search:    203
Display start:  0
Display length: 10

All up to date except;

Library/ Info/ Installed/ Latest
DataTables/ New version available/ 1.10.25/ 1.13.1
Responsive/ New version available/ 2.2.9/ 2.4.0

15 tests complete. No failures or warnings found!