Bootstrap modal: event.relatedTarget (nicht aktualisieren)

Question

Ich habe ein Bootstrap-modal, in dem ich das Aussehen der Schaltfläche aktualisieren möchte, die das Modal gestartet. Das 'relatedTarget' scheint nicht zu aktualisieren, wenn eine neue Schaltfläche das Modal startet.

Here's the Codepen

Um das Problem zu reproduzieren:

1. Klicken Sie erste Schaltfläche modal zu starten. Verwenden Sie das Optionsfeld, um eine Klasse auf die Schaltfläche anzuwenden. Modal schließen.
2. Klicken Sie auf die zweite Schaltfläche, um Modal zu starten. Verwenden Sie das Optionsfeld, um eine andere Klasse auf die zweite Schaltfläche anzuwenden. Modal schließen.

[Problem]: Beide Tasten die gleiche Klasse erhalten. Die erste Schaltfläche ändert auch die Farbe.

$('#myModal').on('show.bs.modal', function (e) { 

    var origin = $(e.relatedTarget); 

    $("#modalButton").click(origin, updateButton); 
    function updateButton (event) { 
     var color = $('input[name="radio_color"]:radio').filter(':checked').val() 
     var origin = event.data; 
     origin.removeClass('blue').removeClass('red').addClass(color); 
     $('#myModal').modal('hide'); 
    } 
}); 

Vielen Dank für jede Hilfe bei der Lösung.

Answer 1

Es ist, weil Sie nicht ungebunden Ihre vorherigen Klick-Ereignis haben (so sie stapeln sich nur - so der zweite Klick 2 Ereignisse ausgelöst - die neue und die zuvor eine gebunden)

hinzufügen:

$("#modalButton").off('click'); 

Bevor Sie binden die neue klicken und es sollte Ihr Problem

Updated Pen