jQuery event handler fires twice

I'm using bootstrap and have some links that when clicked show a modal. I bind an "on" event handler to "show.bs.modal". When the modal shows I get a data attr value from the button that was clicked. There are several buttons that trigger the same modal, but each button has a different data value assigned to it. When a second button is clicked it runs the event handler twice, once for the first time it was clicked and another time for the second. Here is the code:

<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);
        });
    })