如何阻止 ajax 重复上一个请求

How to stop ajax from repeating previous request?

本文关键字：上一个 请求 何阻止 ajax      更新时间：2023-09-26

我有多个带有垃圾桶图标的div标签。
每个div都引用一个唯一的名称，但垃圾桶图标对于所有div标签的功能相同。
当垃圾桶图标clicked时，模态会显示(使用 foundation.zurb(。
模态是具有两个input值的form：OK 和 Cancel 。

当OK按钮clicked我希望form submit触发模式显示的div标记的唯一名称。 这是我所拥有的：

$('a#delete-book').on('click', function(event) {
    console.log('clicked delete');
    event.preventDefault();
    var school, book, genre, url;
    var self = $(this);
    school = $("#school-name").text();
    book = self.parent().children('h3').text();
    genre = self.parent().children('span').text();
    url = '/' + school + '/' + book + '-' + genre;
    console.log('url:'n', url);
    //REVEAL MODAL
    $('#deleteModal.reveal-link').trigger('click');
    doesThisWork(self, url);
  });//DELETE END
  function doesThisWork(self, url) {
    console.log(self, url);
    //EVENT LISTENER ON YES
    $('form#delete-book-form').on('click', function(mevent) {
      console.log('delete-book confirmed');
      $.ajax({
        url: url,
        type: "DELETE",
        dataType: "json"
      })
      .done(function() {
          console.log('delete successful');
          self.parent().remove();
      })
      .fail(function(err) {
        console.log('error:'n', err);
        alert('error:'n', err);
      })
    });//DELETE CONFIRM END
  }

我不知道为什么当我删除另一本书时，再次提交以前的 ajax 请求。
我在某个地方错过了event.preventDefault()吗？

有什么建议吗？

我的第一个想法是多次将事件绑定到 form#delete-book-form 元素(每次点击 a#delete-book 元素(：

$('form#delete-book-form').on('click', function(mevent)

因此，每次执行此操作时，都会将一个新的处理程序附加到 click-event。您可以尝试在 .on-语句之前的行中取消绑定事件，以删除以前的绑定：

$('form

#delete-book-form'(.off('click'(;

相关文章：