Click event listener on elements with the class stops working after first click

Question

I have an anchor element with a class called .trigger. I have a listener for that class which opens a modal using the iziModal framework. On first click the function works as expected. On second click the listener does not work. Instead i get in console "$(...).iziModal is not a function". What am i doing wrong? Any help would be greatly appreciated. I am bot of a newbie with JS.

** Jquery ver ** 3.6.3 Ajax Example 8

$(document).on('click', '.trigger', function(event) {
  event.preventDefault();
  var url = $(this).attr('href');
  var wtitle = $(this).data('title');
  $('#my-modal').iziModal({
    title: wtitle,
    bodyOverflow: true,
    width: 600,
    headerColor: '#000',
    fullscreen: false,
    openFullscreen: false,
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
    onOpening: function(modal) {
      modal.startLoading();
      $.ajax({
        url: url,
        type: 'GET',
        success: function(data) {
          modal.stopLoading();
          modal.setContent(data);
        },
        error: function() {
          alert('Error loading content.');
        }
      });
    }
  });
  $('#my-modal').iziModal('open');
});

I have tried initialising the izi modal outside of the trigger event (suggested by ChatGPT). I think this would work but I am not sure how to pass the URL from the onClick event to $('#my-modal').iziModal(). If someone could suggest that then i could try.

// Initialize the iziModal
$('#my-modal').iziModal({
  title: '',
  bodyOverflow: true,
  width: 600,
  headerColor: '#000',
  fullscreen: false,
  openFullscreen: false,
  transitionIn: 'fadeInDown',
  transitionOut: 'fadeOutUp',
  onOpening: function(modal) {
    modal.startLoading();
    $.ajax({
      url: '',
      type: 'GET',
      success: function(data) {
        modal.stopLoading();
        modal.setContent(data);
      },
      error: function() {
        alert('Error loading content.');
      }
    });
  }
});

// Bind the click event to the trigger element
$(document).on('click', '.trigger', function(event) {
  event.preventDefault();
  event.stopPropagation();
  var url = $(this).attr('href');
  var wtitle = $(this).data('title');
  
  // Set the modal title
  $('#my-modal').iziModal('setTitle', wtitle);
  
  // Set the modal content
  $('#my-modal').iziModal('setContent', '');
  $('#my-modal').iziModal('startLoading');
  $.ajax({
    url: url,
    type: 'GET',
    success: function(data) {
      $('#my-modal').iziModal('stopLoading');
      $('#my-modal').iziModal('setContent', data);
    },
    error: function() {
      $('#my-modal').iziModal('stopLoading');
      alert('Error loading content.');
    }
  });
  
  // Open the modal
  $('#my-modal').iziModal('open');
});