Javascript Ajax在单击事件时发送多个/重复调用

我通过一个AJAX调用获取我的内容，无论出于什么原因，每次新的点击AJAX调用都会复制自己

我已经尝试了在Stackoverflow上从其他线程中找到的不同点击事件。但不幸的是，这也不起作用

$(document).ready(function(){

  var startModal = $('#modal-container').data('modal');

  if (startModal) {
    openUrlInModal(startModal, $('#modal-container'));
  }

  //AJAX Function to fetch project content
  function openUrlInModal(url, target){
    $.ajax({
      url: url,
      type: 'POST',
      success: function(response) {
        $(target).append(url);
        $('#modal-container').html(response);
      }
    });
  }

  // Adds content to the modal on click

  $('.load').on("click",function(e) {

    //History Pushstate
    fetchedProjectUrl = $(this).data('url');
    window.history.pushState(null, null, fetchedProjectUrl);

    //Call Ajax Function
    openUrlInModal(fetchedProjectUrl, $('#modal-container'));

    e.preventDefault();
    e.stopPropagation();
  });

  //Hitting Back Button
  $(window).on("popstate", function(){
    //history.pushState(null, null, "");
    function empty(){
    $('#modal-container').empty();
    }
    setTimeout(empty, 300);
  });
});

---

当您单击该按钮时，可能会触发多个单击事件。您可以在dev工具的事件处理程序区域中看到所有激发的事件

这将删除所有事件处理程序：

$(element).off().on('click', function() {
    // function body
});

$(element).off('click').on('click', function() {
    // function body
});

要仅删除已注册的“单击”事件处理程序，请执行以下操作：

$(element).off().on('click', function() {
    // function body
});

$(element).off('click').on('click', function() {
    // function body
});

---

您可能多次调用该函数。还有更多的代码吗？很多次执行

.off（）.on（“单击”），

…当我看到多个事件触发时会有所帮助。感谢您的快速回答。不幸的是，这对我也不起作用。链接现在只在第三次单击时起作用。您可能还希望尝试将这些行放在单击函数的开头，而不是结尾：

e.preventDefault（）；e.stopPropagation（）

hmm仍然存在相同的问题：（控制台仍然在重复调用）您可以让jQuery选择器更具体一些吗？可能需要一个ID吗？