javascript - 使用 jQuery 动态创建垂直分组的单选按钮

Question

我正在使用 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() 上动态注入(inject)我的标记时，它会注入(inject)正确的标记，但它根本不会设置控制组的样式。

$.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 正确设置控制组的样式？

Answer 1

添加这一行

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

之后

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

此代码片段将强制重建测验页面，以便将 jqm 样式应用于页面内容。