elements don't listen to events after DOM manipulation

Question

I have these HTML elements created by DOM manipulation. They are nested inside the div with className pagination:

I have this event handler to react every time any anchor element is clicked:

$('.pagination a').on('click', (event) => {
  $('.pagination a').removeClass('active');
  event.target.className = 'active';
  numPage = event.target.innerHTML;
  showPage(numPage, studentList)
});  

I have this function that removes the ul list from the pagination div and creates a new ul element, depending on the numbers of studenst on the list, and append it to the pagination div again (parent1 = pagination div):

function appendPageLinks(stuList) {
  let nPages = Math.ceil(stuList.length/10);
  const ulCreated = document.createElement('ul');
  parent1.appendChild(ulCreated);

  for (i = 0; i < nPages; i++) {
    if (i < nPages) {
      let li = document.createElement('li');
      let a = document.createElement('a');
      a.textContent = i + 1;
      ulCreated.appendChild(li);
      li.appendChild(a);
      $('a').attr('href', '#');

    }

  }
  let clicked = ulCreated.getElementsByTagName('a')[0];
  clicked.className = 'active';
} 

This is the HTML after removing and adding the new ul list with all the nested elements:

According to the HTML, they are both the same but my event handler doesn't listen to the event of the new pagination links I created, even though they are nested inside the same elements.

I already tried using a debugger but it doesn't accept the click event and I don't know why. I searched on Google for a reason of this behavior but I think I'm not using the right terminology to find the bug.

Any help would be much appreciate it.

Cheers