Création dynamique de boutons radio groupés verticalement avec jQuery
Je suis de créer dynamiquement plusieurs verticalement groupées des boutons radio à l'aide de jQuery mobile 1.0 pour un questionnaire à choix multiple.
Quand je colle ce code à partir de la JQM Bouton Radio Docs dans ce style à la controlgroup correctement.
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
</fieldset>
Quand je dynamiquement injecter de balisage sur pageshow()
il injecte le balisage, mais il n'est pas le style du groupe de contrôle à tous.
$.getJSON("assets/json/aircraft.json", function (data) {
var maxQuestions = 10;
var maxChoices = 4;
var randomsorted = data.aircraft.sort(function (a, b) {
return 0.5 - Math.random();
});
var quiz = $.grep(randomsorted, function (item, i) {
return i < (maxQuestions * maxChoices);
});
var arr_quiz_markup = [];
$.each(quiz, function (i, item) {
var q = Math.floor(i / maxChoices);
var c = i % maxChoices;
if (c == 0) arr_quiz_markup.push("<div>Image for question " + q + " goes here...</div><fieldset data-role='controlgroup' data-question='" + q + "'>");
arr_quiz_markup.push("<input type='radio' name='q" + q + "' id='q" + q + "c" + c + "' data-aircraftid='" + item.id + "' />");
arr_quiz_markup.push("<label for='q" + q + "c" + c + "'>" + item.name + "</label>");
if (c == maxChoices - 1 || c == quiz.length - 1) arr_quiz_markup.push("</fieldset><br />");
});
$("#questions").html(arr_quiz_markup.join("")).controlgroup("refresh");
});
J'ai essayé $("#questions :radio").checkboxradio("refresh");
mais jette "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'"
.
Mon Live Quiz Démo (Désolé, jsfiddle
n'a pas de jQuery Mobile de la liste)
Ce que je fais mal? Comment puis-je actualiser ce bien obtenir JQM de style de la controlgroup correctement?
source d'informationauteur Greg
Vous devez vous connecter pour publier un commentaire.
Ajouter cette ligne
après
Cet extrait de code entraîne la reconstruction de la page du quiz afin que jqm styles seront appliqués pour le contenu de la page.
Vous obtiendrez plus d'informations à propos de la dynamique dans ce jQuery fil de discussion du Forum.
Le jQuery Mobile styles par défaut sera appliquée une fois que vous utiliser le code suivant. C'est ce que j'ai trouvé et ça fonctionne pour moi.
Cela fonctionne pour moi (je suis à l'aide de jQuery Mobile 1.4.0):
HTML
JS