JS动态生成界面中存在的问题!
来源:互联网 发布:高斯滤波算法实现 编辑:程序博客网 时间:2024/06/03 16:01
公司在做一个 项目的时候需要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");
})
}
});
},
虽然只是一个小问题,但是每个小问题总结起来就不是小问题,
每天进步一点点!!!
- JS动态生成界面中存在的问题!
- Dialog中存在radiogroup动态添加radiobutton的ID问题
- 意外解决js动态生成的html代码中一些事件失效问题
- JS根据动态生成的字符串,验证是否存在对应function并执行
- js中showModalDialog存在的跨域问题
- js中动态生成表格
- C#中 存在主界面中的菜单项,在其他类中或者界面中,找不到的问题
- js动态生成表格时 colspan的问题
- js做拼图游戏存在随机生成的图形,有时不可还原的问题
- JS继承机制的深入理解--动态原型存在的问题与解决
- js如何获取table中动态生成的数据
- WEB检索界面动态生成的实现
- 动态树的生成 js
- JS动态的生成表格
- JDBC中存在的问题
- 项目中存在的问题
- 在2003中调用动态生成的radiobuttonlist的问题
- 动态生成界面
- ftp: connect: No route to host
- JS中操作DOM文档
- ssh 的用法
- jmeter压测参数设定
- Windows 64位 Python 2.7 简单安装MySql模块
- JS动态生成界面中存在的问题!
- js 高程学习总结 第六章
- 不连续处断开
- ubuntu升级php
- 复用类
- Spring配置By Craig Walls
- 剑指offer 面试题4—替换字符串中空格
- zynq的学习(一)
- ScrollView嵌套ListView显示不完全、嵌套TextView不能滚动解决办法