公司在做一个 项目的时候需要JS动态生成html界面，类似于问卷调查的界面。可是怎么搭建才能更好呢？
一，把所有问题和选项一起直接加载到界面。类似于这样：
success: function(MyJson) { //回调函数，MyJson，返回值
var MyData = MyJson.d;
MyData = eval(MyData);
$.each(MyData, function(i, qsData) {
qst_problem += "<form class='mui-input-group'>";
qst_problem += "<div class='mui-card' id='qs'>";
qst_problem += "<h5 class='mui-content-padded'>";
//所有的问卷
qst_problem += qsData.QS_Title;;
qst_problem += "</h5>";
//问卷的题目
LoadChoice(qsData.QS_GUID);
for(var i = 0; i < choices.length; i++) {
qst_problem += "<div class='mui-input-row mui-radio mui-left'><label>";
//所有的abcd选项
qst_problem += choices[i];
qst_problem += "</label>";
//选项的guid和选项
qst_problem += "<input name='radio1' type='radio' title='" + mychoiceguid[i] + "' value='" + choices[i] + "'>";
qst_problem += "</div>";
}
qst_problem += "</div>";
qst_problem += "</form>";
但是这样存在一个问题，动态生成所有的我要点击的选项的id不能获取，就不能绑定监听事件。导致的问题是不能我选择的选项的数据提交上去；<input type='radio'>
也不能动态添加checked属性；
第二种方法：
先加载一个题目和一组选项，然后循环嵌套，动态ID绑定事件。
var MyData = MyJson.d;
MyData = eval(MyData);
$.each(MyData, function(i, qsData) {
var id = "qs_" + index;
var qst_problem = "";
qst_problem+="<form class='mui-input-group'>";
qst_problem += "<div class='mui-card' id='" + id + "'>";
qst_problem += "<h5 class='mui-content-padded'>";
qst_problem += qsData.QS_Title;
qst_problem += "</h5>";
qst_problem += "</div>";
qst_problem +="</form>";
$("#qst_problem").append(qst_problem);
LoadChoice(qsData.QS_GUID);
for(var j=0;j<choices.length;j++)
{
var qst_id = id + "_" + ( j + 1 );
var qst_select = "<div id='" + qst_id + "' class='mui-input-row mui-radio mui-left'><label>";
qst_select+= choices[j];
qst_select+="</label>";
qst_select+="<input name='radio" + index + "' type='radio' title='"+mychoiceguid[j]+"' value='"+choices[j]+"'>";
qst_select +="</div>";
$("#"+id).append(qst_select);
document.getElementById(qst_id).addEventListener("tap",function(){
$("#"+ id +" input").removeAttr("checked");
$(this).find('input:eq(0)').attr("checked","checked");
})
}
});
},
虽然只是一个小问题，但是每个小问题总结起来就不是小问题，
每天进步一点点！！！