javascript 使用 jQuery 动态创建垂直分组的单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8922343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically creating vertically grouped radio buttons with jQuery
提问by Greg
I'm dynamically creating several vertically grouped radio buttons using jQuery mobile 1.0 for a multiple choice quiz.
我正在使用 jQuery mobile 1.0 动态创建几个垂直分组的单选按钮以进行多项选择测验。
When I paste this code from the JQM Radio Button Docsin it styles the controlgroup properly.
当我从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>
When I dynamically inject my markup on pageshow()it injects the proper markup but it doesn't style the control group at all.
当我动态注入我的标记时，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");
});
I tried $("#questions :radio").checkboxradio("refresh");but throws "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'".
我试过了，$("#questions :radio").checkboxradio("refresh");但抛出"cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'".
My Live Quiz Demo(Sorry, jsfiddledoesn't have jQuery Mobile listed)
我的现场测验演示（抱歉，jsfiddle没有列出 jQuery Mobile）
What am I doing wrong? How do I refresh this to properly get JQM to style the controlgroup correctly?
我究竟做错了什么？我如何刷新它以正确地让 JQM 正确设置控制组的样式？
回答by user700284
Add this line
添加这一行
$("#quiz").trigger("create");
after
后
$("#questions").html(arr_quiz_markup.join("")).controlgroup("refresh");
This code snippet will force a rebuild of the quiz page so that jqm styles will be applied to the page contents.
此代码片段将强制重建测验页面，以便将 jqm 样式应用于页面内容。
回答by Sree
You will get more information about the dynamic in this jQuery Forum thread.
您将在此jQuery 论坛主题中获得有关动态的更多信息。
The jQuery Mobile default styles will be applied once you use the following code. That's what I found and it's working for me.
使用以下代码后，将应用 jQuery Mobile 默认样式。这就是我发现的，它对我有用。
$("input[type='radio']").checkboxradio().checkboxradio("refresh");
回答by Paul Vargas
This works for me (I'm using jQuery Mobile 1.4.0):
这对我有用（我使用的是 jQuery Mobile 1.4.0）：
HTML
HTML
<div id="locations" data-role="controlgroup"></div>
JS
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"});
},
...
});
