web-dev-qa-db-fra.com

événement de clic qui ne se déclenche pas dans un groupe de boutons radio bootstrap

Je crée des boutons radio de manière dynamique et, à l'aide de la fonction on (), essayez de capturer le clic et de faire quelque chose avec.

Tant que j'ai utilisé les boutons radio, cela a bien fonctionné. J'ai ensuite encapsulé les boutons radio dans une balise d'amorçage pour en faire un groupe de boutons. Désormais, lorsque je clique sur le bouton, l'événement de clic ne se déclenche jamais. Aucune idée de ce que je manque! 

Voici le code

le balisage généré dynamiquement

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

Voici le balisage qui sélectionne la radio via un sélecteur jQuery et vérifie si un clic a été déclenché

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

Est-ce que bootstrap intervient d'une manière ou d'une autre? Je regarde le code et mes yeux ne comprennent plus l'erreur. Toute aide/conseils appréciés!

(PS - les boutons radio sont convertis en un groupe de boutons agréable à regarder, les boutons cliquent et restent appuyés sur ceux cliqués, etc., de sorte que le comportement semble correct, sauf que le clic n'est pas enregistré par (..))

jqueryasp.net-mvctwitter-bootstraptwitter-bootstrap-3asp.net-mvc-5
35
Gerry

Utilisez plutôt le gestionnaire de modifications, car les clics se produisent dans l'étiquette.

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

Démo: Fiddle

58
Arun P Johny

J'ai eu un défi avec ça aussi. Mais au lieu de mettre les eventListeners sur les boutons radio, je les mets sur

$('#d_op_1').on("click",function(){ 
   alert("click fired"); 
});
16
user1587439

Utilisez l'attribut onchange () de l'entrée.

<input id="3" name="option" type="radio" style="height: 15px;width: 15px;" onchange="alert('changed')">
1
Ravi Wadje