Как остановить ajax от повторения предыдущего запроса?

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 
    } 

Я не могу понять, почему, когда я удалить другую книгу запрос предыдущего Аякса будет вновь внесен.
Я пропустил event.preventDefault() где-нибудь?

Любые предложения?

Answer 1

Моя первая мысль, что вы свяжете событий несколько раз к форма # удалить книга-форма элемента (за каждый клик на # удалить книга элемент):

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

Так каждый раз, когда вы делаете это, к клику-событию будет прикреплен новый обработчик. Вы можете попытаться отвязать событие в строке перед вашим .on-заявлением, чтобы удалить предыдущее связывание:

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