Click events not working in cloned buttons within fixed columns

Question

After following https://stackoverflow.com/a/62034229/4217097 to make fixedColumns work in Angular Datatables, I found that the buttons inside the fixed column no longer fire the (click) event. The fixed columns are okay though.

angular.json

  "styles": [
         "src/styles.scss",
         "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css",
         "node_modules/datatables.net-fixedcolumns-bs/css/fixedColumns.bootstrap.css"
  ],
  "scripts": [
         "node_modules/jquery/dist/jquery.js",
         "node_modules/datatables.net/js/jquery.dataTables.js",
         "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js",
         "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js"
  ]

component.ts

   import { DataTableDirective } from 'angular-datatables';
   import 'datatables.net-fixedcolumns';

   ...

   this.dtOptionsTasklist = {
       fixedColumns:  {
          leftColumns: 1,
          rightColumns: 1
       }
   }

If you've solved this before, please let me know!

Answer 1

Alright, for anyone googling in the future, just use position:sticky; if you only need to support modern browsers. Check the solutions here: Table with fixed header and fixed column on pure css