Как работает цепочка событий для нескольких объектов?

Question

Я выполняю действие удаления на странице, когда пользователь нажимает кнопку подтверждения на кнопке модального окна twitter bootstrap.

У меня есть две кнопки: один позволяет пользователю отменить действие, а другой - подтвердить.

Когда пользователь нажимает кнопку подтверждения, когда модаль скрыт, я выполняю свои действия, поэтому, например, я могу показать анимацию и фактически удалить элемент.

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

Не следует ли исключать «скрытое» событие из элемента после его выполнения?

Я знаю, что могу отключить изменение цепочки событий $('#confirmDeleteModal').on('hidden', function() { до $('#confirmDeleteModal').off('hidden').on('hidden', function() {, но я действительно понял бы, почему это происходит. Я что-то упускаю?

Код:

$(document).ready(function(){ 
    $('.delete').on('click', function() { 
     var itemID = $(this).data('product-id') 

     $('#confirmDeleteModal').modal('show'); 

     $('#confirmDelete').on('click', function() { 

      $('#confirmDeleteModal').on('hidden', function() { 
       // Here I do my stuff to perform deletion 
       $('#result').append('This method has been called for ' + itemID + ' <br />') 
      }); 
     }); 
    }); 
}); 

Я надеюсь, что разоблачили четко на мой вопрос. Я подготовил JS Bin, а также: http://jsbin.com/inulaw/5/edit

Answer 1

Проблема здесь состоит в том, что вы подключаете дополнительные слушателей к click и hidden событий каждый раз. Чтобы исправить это, запустите метод jQuery .off('eventName') перед вызовом .on('eventname').

Вот ваш код обновлен и работает прекрасно в JS Bin:

$(document).ready(function(){ 
    $('.delete').on('click', function() { 
     var itemID = $(this).data('product-id') 

     $('#confirmDeleteModal').modal('show'); 

     $('#confirmDeleteModal').off('hidden'); // must reset from previous 
     $('#confirmDelete').off('click').on('click', function() { 

      $('#confirmDeleteModal').on('hidden', function() { 

        // Here I do my stuff to perform deletion 
        $('#result').append('This method has been called for ' + itemID + ' <br />') 
      }); 
     }); 
    }); 
}); 

EDIT: я переехал $('#confirmDeleteModal').off('hidden'); выше события щелчка, так что сбрасывает или нет щелкнуло подтверждение.