DOM操作后，元素不会监听事件

Question

我有DOM操作创建的这些HTML元素。它们使用className分页嵌套在div中：

我有这个事件处理程序，每次点击任何锚元素时都会做出反应：

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

我有这个函数从分页div中删除ul列表并创建一个新的ul元素，具体取决于列表中的studenst数，并再次将它附加到分页div（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';
} 

这是删除并添加包含所有嵌套元素的新ul列表后的HTML：

根据HTML，它们都是相同的但是我的事件处理程序不会监听我创建的新分页链接的事件，即使它们嵌套在相同的元素中。

我已经尝试过使用调试器，但它不接受click事件，我不知道为什么。我在Google上搜索了这种行为的原因，但我认为我没有使用正确的术语来查找错误。

任何帮助都会非常感激。

干杯