Question

我有多个带有垃圾桶图标的div标签每个div引用一个唯一名称，但垃圾桶图标的功能与所有div个标签相同。
当垃圾桶图标为clicked时，会显示一个模态（使用foundation.zurb）模态是form，其中包含两个input值：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()吗？

有什么建议吗？

Answer 1

我首先想到的是，您多次将事件绑定到表单＃delete-book-form 元素（对于 a＃delete-book 元素的每次点击）：

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

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

$（ '形式＃删除书形式'）off（ '点击'）;

如何阻止ajax重复之前的请求？

1 个答案: