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

单击该按钮时可能会触发多个单击事件。您可以在开发工具的“事件处理程序”区域中查看所有触发的事件。

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

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

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

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

Ajax在点击事件上发送多个/重复呼叫

1 个答案: