Javascript jQuery在每次函数调用中存储和执行以前的AJAX HTTP请求

我有一个函数，由

元素的

onclick

事件调用。该函数的目的是使用引导弹出一个模式对话框，并使用AJAX调用显示更新的内容。URL每次都不同。每次关闭对话框时，使用

hidden.bs.modal

事件处理程序清除模式对话框的内容

我遇到的问题很奇怪。第一个请求运行正常，并按预期显示内容。任何后续调用都会附加到上一个调用，并且每次调用的数量似乎都会增加。将执行以前所有调用的历史记录。这几乎就像以前的调用都被缓存一样

例如：

单击1

• 单击1 HTTP请求

单击2

• 单击1 HTTP请求{ $（文档）.on（'show.bs.modal'，“#pageModal”，函数（e）{ $.ajax({ 键入：“获取”， url:url， 成功：功能（res）{ $（“.modal.modal对话框”）.html（res）； }, 缓存：false }); }); $（“#pageModal”）.modal（'show'）； }

  ---

  每次调用函数时，您都会在（'show.bs.modal'）上添加一个新的

  .on

  事件侦听器。每个侦听器都会发出请求
  我认为ajax并不需要那个事件，只需在

  success

  回调中显示模式，或者在请求完成之前用加载图标显示模式

  showInModal = (url) => {
      
          $.ajax({
              type: "GET",
              url: url,
              success: function (res) {
                  $(".modal .modal-dialog").html(res);
                  $("#pageModal").modal('show');
              },
              cache: false
  
          });    
  
  }
  

  ---

  谢谢，现在完全有意义了！我已经对代码进行了重构，这样就不会在每次调用函数时都设置事件处理程序。

  //Modal dialog ajax
  
  var loadingSpinner = '<div class="modal-content"><div class="model-body"><div class="loading-spinner"></div></div></div>';
  
  
  $(document).on('hidden.bs.modal', "#pageModal", function (e) {
      $(".modal .modal-dialog").html(loadingSpinner);
  });
  
  
  showInModal = (url) => {
      $(document).on('shown.bs.modal', "#pageModal", function (e) {
          $.ajax({
              type: "GET",
              url: url,
              success: function (res) {
                  $(".modal .modal-dialog").html(res);
              },
              cache: false
  
          });
      });
  
      $("#pageModal").modal('show');
  
  }
  

  showInModal = (url) => {
      
          $.ajax({
              type: "GET",
              url: url,
              success: function (res) {
                  $(".modal .modal-dialog").html(res);
                  $("#pageModal").modal('show');
              },
              cache: false
  
          });    
  
  }