jQuery обработчик событий дважды срабатывает

Question

Я использую bootstrap и имею некоторые ссылки, которые при нажатии показывают модальный. Я привязываю обработчик события «on» к «show.bs.modal». Когда модальные показы, я получаю значение attr данных от кнопки, которая была нажата. Существует несколько кнопок, которые запускают один и тот же модальный, но каждая кнопка имеет другое значение данных, назначенное ему. Когда нажимается вторая кнопка, она дважды запускает обработчик событий, один раз в первый раз, когда он был нажат, и другое время для второго. Вот код:

<a href="#" data-ucid="1" data-toggle="modal" data-target="#delete-modal" class="delete"><img src="/resources/images/delete.png" class="delete-icon" /> 

$('#delete-modal').on('show.bs.modal', function (event) { 
     var button = $(event.relatedTarget); 
     var ucId = button.data('ucid'); 
     var modal = $(this); 

     modal.find('.modal-footer .btn-primary').click(function(event) { 
      $('#delete-modal').find('.btn-primary').find('span').toggleClass('glyphicon').toggleClass('glyphicon-refresh').toggleClass('spinning'); 
      deleteConnection(ucId); 
     }); 
    }) 

Answer 1

Это почти всегда плохая практика, чтобы назначить обработчик событий внутри других обработчиков событий

Быстрого исправления для вашего кода будет использовать off('click') перед назначением нового слушателя

modal.find('.modal-footer .btn-primary').off('click').click(function(event) { 

Лучше было использовать событие кнопки для хранения данных на модальном элементе и полностью отделить прослушиватели событий

$('#delete-modal').on('show.bs.modal', function (event) { 
     $(this).data('ucid', $(event.relatedTarget).data('ucid')); 
}); 

$('#delete-modal .modal-footer .btn-primary').click(function(event) {  
    var ucid = $('#delete-modal').data('ucid'); 
    $(this).find('span').toggleClass('glyphicon').toggleClass('glyphicon-refresh').toggleClass('spinning'); 
    deleteConnection(ucId); 
}); 

Answer 2

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

Если вы хотите, чтобы одно событие срабатывало, добавьте e.oreventDefault() в конце обратного вызова клика модального нижнего колонтитула.