O manipulador de eventos jQuery é acionado duas vezes - jquery, twitter-bootstrap-3

Eu estou usando o bootstrap e tenho alguns links que quandoclicado mostra um modal. Eu ligar um manipulador de eventos "on" para "show.bs.modal". Quando o modal mostra, recebo um valor attr de dados do botão que foi clicado. Existem vários botões que acionam o mesmo modal, mas cada botão tem um valor de dados diferente atribuído a ele. Quando um segundo botão é clicado, ele executa o manipulador de eventos duas vezes, uma pela primeira vez em que foi clicado e outra pela segunda vez. Aqui está o código:

<a href="#" data-ucid="1" data-toggle="modal" data-target="#delete-modal" class="delete"><img src="/images//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);
});
})

Respostas:

É quase sempre uma prática ruim designar ouvintes de eventos dentro de outros manipuladores de eventos

Uma solução rápida para o seu código seria usar off("click") antes de atribuir um novo ouvinte

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

Uma abordagem melhor seria usar o evento de botão para armazenar dados no elemento modal e separar completamente os ouvintes de evento

$("#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);
});

Se você clicar no rodapé modal, o evento "click" será acionado. Isso será enviado para o modal e seu evento também será disparado.

Se você quiser apenas um evento para disparar, adicione e.oreventDefault() no final do rodapé modal, clique em retorno de chamada.