Creo botones de radio dinámicamente y, utilizando una función on (), intento capturar el clic y hacer algo con él.

Mientras usé los botones de radio funcionó bien. Luego encapsulé los botones de radio dentro de una marca de inicio para convertirlos en un grupo de botones; ahora, cuando hago clic en el botón, el evento de clic nunca se dispara. ¡Ni idea de lo que me estoy perdiendo!

Aquí está el código

El marcado que se genera dinámicamente.

 <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>

Aquí está el marcado que selecciona la radio a través de un selector de jQuery y comprueba si se disparó un clic

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

¿Bootstrap está interfiriendo de alguna manera, o me estoy perdiendo algún paso? Estoy mirando el código y mis ojos ya no entienden un error. Cualquier ayuda / consejos apreciados!

(PS: los botones de radio se convierten en un grupo de botones atractivos, los botones hacen clic y se mantienen presionados en los botones en los que se hizo clic, etc., por lo que el comportamiento parece correcto, excepto que el clic no se registra en (...))