Refresh buttons on paginate

Question

I am building a paginated Datatable from ajax-sourced data:

let table = $('#userTable').DataTable({
  destroy: true,
  "ajax": {url: url, type: 'GET', "dataSrc": ""},
  "pagingType": "simple",
  "columnDefs": [
    // ...
  ],

  "order": [[3, "desc"]],
  "columns": [
    { "data": "view", "defaultContent": "" },
    { "data": "username" },
    { "data": "email", "defaultContent": ""},
    { "data": "lastActive"},
    { "data": "completed" },
    { "data": "_id" }
  ],
  "fnInitComplete": function(oSettings, json) {
    console.log("Finished drawing table");
    $('#spinner').addClass('d-none');
    $('.view-profile').on('click', getProfile);
    $('.btn-delete').on('click', purgeUser);
    $('.page-link').on('click', () => {
      console.log("Clicked on paginate button")
      $('.view-profile').on('click', getProfile);
      $('.btn-delete').on('click', purgeUser);
    })
  }
});

I add buttons (.view-profile and .btn-delete) to each row, and add a listener only after the table is initialised using [fnInitComplete][2].

However, on clicking on a paginate button .page-link, the buttons are no longer clickable - how can I re-listen for clicks on paginating?

I've tried adding a timeout function to first wait for buttons to be drawn (.view-profile) and then wait for 1s after clicking on a .page-link before adding $('.view-profile').on('click', getProfile) - but this isn't working. What am I missing?

if($('.view-profile')){
  setTimeout(() => {
    $('.page-link').on('click', function() {
      setTimeout(() => {
        console.log("Next page")
        $('.view-profile').on('click', getProfile);
        $('.btn-delete').on('click', purgeUser);
      }, 1000);
    })
  }, 1000);
}