Обробник події jQuery запускає двічі - jquery, twitter-bootstrap-3

Я використовую bootstrap і є посилання, які колинатиснув показати модальний. Я прив'язую обробник подій "на" до "show.bs.modal". Коли модальний показує, я отримую дані attr значення з кнопки, яка була натиснута. Існує кілька кнопок, які запускають один і той же модальний режим, але кожній кнопці присвоєно інше значення даних. При натисканні другої кнопки він двічі запускає обробник події, один раз вперше натиснув, а другий - другий раз. Ось код:

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

Відповіді:

Це майже завжди погана практика призначення слухачів подій всередині інших обробників подій

Швидке виправлення для вашого коду буде використовувати 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);
});

Якщо ви натиснете на модальний нижній колонтитул, це запуститься подія кліку. Це буде міхура до модального і його подія буде стріляти також.

Якщо ви просто хочете, щоб одна подія стріляла, додайте e.oreventDefault() в кінці модального нижнього колонтитула натисніть зворотний виклик.