Ajax отправляет несколько / дублирующих звонков по событию клика

Question

Я загружаю свое содержимое с помощью вызова 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);
  });
});

Answer 1

Возможно, когда вы нажимаете эту кнопку, запускаются события нескольких кликов. Вы можете увидеть все запущенные события в области Обработчик событий инструментов dev.

Это удалит все обработчики событий:

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

Чтобы удалить только зарегистрированные обработчики событий 'click':

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