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

  1. 12

    Ajouter cette ligne

    $("#quiz").trigger("create");

    après 

    $("#questions").html(arr_quiz_markup.join("")).controlgroup("refresh");

    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.

  2. 3

    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.

    $("input[type='radio']").checkboxradio().checkboxradio("refresh");
  3. 1

    Cela fonctionne pour moi (je suis à l'aide de jQuery Mobile 1.4.0):

    HTML

    <div id="locations" data-role="controlgroup"></div>

    JS

    $.ajax({
    ...
    success: function(data, textStatus, jqXHR) {
        //Hide loading message
        $.mobile.loading("hide");

        //Build page
        $("#location-page").trigger("create");

        //Clear another previos radio options
        $("#locations").controlgroup("container")["empty"]();

        //Read XML response
        var rows = $("Row", data);

        $(rows).each(function(index, value) {
            var locationId = $("LocationID", this).text();
            var locationName = $("LocationName", this).text();
            var $el = $("<label for=\"location" + index + "\">" + locationName + "</label><input type=\"radio\" name=\"location\" id=\"location" + index + "\" value=\"" + locationId + "\">")
            $("#locations").controlgroup("container")["append"]($el);
            $($el[1]).checkboxradio();
        });
        $("#locations").controlgroup("refresh");

        //Change to locations' page
        $.mobile.changePage("#location-page", {transition: "flip"});
    },
    ...
});