buttons not working after reload

jamies

I have aa edit button on my datatable that opens a modal to edit the data. when we update the data and then reload the datatable the edit buttons on the datatable no longer work

One of my Datatable Columns with the Edit Button

function loadAddressTable(){
  var table = $('#tblAddresses').DataTable({
            "destroy": true,
            "processing": true,
            "serverSide": false,
            "paging": false,            
            "ajax": {
              "type": "POST",
              "url": config.apiurl + "/companies.php",
.......
}
 "columns": [{
...other columns.....
{
                "data": "id",
                "render": function(data, type, full, meta) {
                  $str = '<a class="btn btnEditAddress btn-primary" data-toggle="modal" data-target="#editAddressModal" id="btnedit' + full.id + '" data-address-id=' + full.id + '>' + 'Edit' + '</a>    ';
                  return $str;
                }
}]
// The On click event on the datable.....
 .on( 'click', '.btnEditAddress', function () {
        var data = table.row( $(this).parents('tr') ).data();
        $('#hfaddressid').val(data.id);
        $('#address_line1').val(data.address_line1);
        $('#address_line2').val(data.address_line2);
        $('#town').val(data.town);
        $('#county').val(data.county);
        $('#postcode').val(data.postcode);
        $('#editAddressModal').modal('show');

the update button on the modal sends the data back to the server then calls the loadAddressTable() function which has the full code to load the table.

the error i get when i then click on the edit buttons
Uncaught TypeError: Cannot read properties of undefined (reading 'id')
at HTMLAnchorElement.<anonymous> (company_details.php:722:36)
at HTMLTableElement.dispatch (jquery.min.js:2:43064)
at HTMLTableElement.v.handle (jquery.min.js:2:41048)

kthorngren

Sounds like you need to use delegated events like this example.

Kevin