Ich erstelle Optionsfelder dynamisch und versuche mithilfe einer on () -Funktion, den Klick zu erfassen und etwas damit zu tun.

Solange ich Radioknöpfe benutzte, funktionierte es gut. Ich habe dann die Optionsfelder in einem Bootstrap-Markup gekapselt, um sie in eine Schaltflächengruppe umzuwandeln. Wenn ich jetzt auf die Schaltfläche klicke, wird das Klickereignis nie ausgelöst. Keine Ahnung was mir fehlt!

Hier ist der Code

das dynamisch erzeugte Markup

 <div id="q_opt" class="btn-group" data-toggle="buttons">
        <label class="btn btn-default active" id="d_op_0"> <input id="q_op_0" name="op" type="radio" value="0">22%
    </label>
    <label class="btn btn-default" id="d_op_1"> <input id="q_op_1" name="op" type="radio" value="1">19%
    </label>
    <label class="btn btn-default" id="d_op_2"> <input id="q_op_2" name="op" type="radio" value="2">11%
    </label>
    <label class="btn btn-default" id="d_op_3"> <input id="q_op_3" name="op" type="radio" value="3">42%
    </label>
    <label class="btn btn-default" id="d_op_4"> <input id="q_op_4" name="op" type="radio" value="4">8%</label>
</div>

Hier ist das Markup, das das Radio über einen jQuery-Selektor auswählt und prüft, ob ein Klick ausgelöst wurde

$(document).on('click', 'input:radio[id^="q_op_"]', function(event) {
    alert("click fired");
}

Stört Bootstrap irgendwie - oder fehlt mir ein Schritt? Ich starre auf den Code und meine Augen sehen keinen Fehler mehr. Jede Hilfe / Tipps geschätzt!

(PS - Die Optionsfelder werden in eine gut aussehende Schaltflächengruppe umgewandelt. Die Schaltflächen klicken und bleiben auf den angeklickten Schaltflächen usw. gedrückt, sodass das Verhalten in Ordnung zu sein scheint, mit der Ausnahme, dass der Klick nicht von (..) registriert wird.)