Il gestore di eventi jQuery si attiva due volte: jquery, twitter-bootstrap-3

Sto usando bootstrap e ho dei link che quandocliccato mostra una modale. Associare un gestore di eventi "on" a "show.bs.modal". Quando il modale mostra ottengo un valore attr di dati dal pulsante su cui è stato fatto clic. Esistono diversi pulsanti che attivano lo stesso modale, ma a ciascun pulsante è assegnato un valore di dati diverso. Quando viene cliccato un secondo pulsante, esegue il gestore eventi due volte, una volta per la prima volta è stato fatto clic e un'altra volta per il secondo. Ecco il codice:

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

risposte:

È quasi sempre una cattiva pratica assegnare i listener di eventi all'interno di altri gestori di eventi

Una soluzione rapida per il tuo codice sarebbe da utilizzare off("click") prima di assegnare un nuovo ascoltatore

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

Un approccio migliore sarebbe utilizzare l'evento button per memorizzare i dati sull'elemento modal e separare completamente gli ascoltatori di eventi

$("#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 si fa clic sul modale footer, l'evento click su di esso si attiverà, e questo diventerà il modale e il suo evento verrà attivato anche.

Se vuoi solo un evento sparare, aggiungi e.oreventDefault() alla fine del modale footer, fare clic su callback.