单击元素上的事件侦听器，类在第一次单击后停止工作

Question

我有一个名为 .trigger 的锚元素。我有一个该类的侦听器，它使用 iziModal 框架打开一个模式。第一次单击时，该功能按预期工作。第二次单击时，侦听器不起作用。相反，我进入控制台“$(...).iziModal 不是函数”。我究竟做错了什么？任何帮助将不胜感激。我是 JS 的新手机器人。

** Jquery 版本 ** 3.6.3 阿贾克斯示例 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');
});

我尝试在触发事件之外初始化 izi 模式（由 ChatGPT 建议）。 我认为这可行，但我不确定如何将 URL 从 onClick 事件传递到 $('#my-modal').iziModal()。如果有人可以建议那么我可以试试。

// 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');
});