Why is there no response when I click the button?

Question

AJAX

There is a code that sends a request to a page with table generation. When the page is loaded, the table is generated normally, i.e. get_table(1); works fine.

get_table(1);
  
  pags = document.getElementsByClassName('pag');
  
  for (var i = 0; i < pags.length; i++) {
    pags[i].addEventListener('click', pagination);
  }
  function pagination() {
    var page = this.dataset.page;	
    get_table(page);
  }
  function get_table(page) {		
    console.log(page);
    $.ajax({
      method: 'POST',
      url: 'cpl_offices_create_table.php',
      data: {page: page}
    }).done(function(html) {
      $('#office-table').html(html);
    });
  }

There is such a button, when clicked, the first page generated by get_table(1); should be replaced by the 10th. But when the button is pressed, nothing happens. It doesn't even output anything to the console. I tried to put onclick="pagination()" , also nothing.
<button class="pag" data-page="10">10</button>

Answer 1

Do you have pag elements on the page or do they come with the table?
I think this is the answer.

Answer 2

I can't figure out why, but try this:

window.onclick = function(e){
  if(e.target.classList.contains('pag')){
    pagination.bind(e.target)();
  }
}