Динамическое создание вертикально сгруппированных переключателей с помощью jQuery

Я динамически создаю несколько вертикально сгруппированных переключателей, используя jQuery mobile 1.0 для многократной викторины.

Когда я вставляю этот код из JQM Radio Button Docs, он правильно настраивает контрольную группу.

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

Когда я динамически вставляю свою разметку на pageshow(), она вводит правильную разметку, но не создает стиль группы управления.

$.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");
});

Я попробовал $("#questions :radio").checkboxradio("refresh");, но выбрал "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'".

My Live Quiz Demo (Извините, jsfiddle не содержит jQuery Mobile)

Что я делаю неправильно? Как обновить это, чтобы правильно настроить JQM для правильной настройки контрольной группы?

Ответы

Ответ 1

Добавьте эту строку

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

после

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

Этот фрагмент кода заставит перестроить страницу опроса, чтобы стили jqm были применены к содержимому страницы.

Ответ 2

Вы получите дополнительную информацию о динамике в этом jQuery Forum.

Стили jQuery Mobile по умолчанию будут применены после использования следующего кода. Это то, что я нашел, и это работает для меня.

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

Ответ 3

Это работает для меня (я использую 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"});
    },
    ...
});