ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题，所以要动态加载 css ji等文件了
1.公共方法 load
//动态加载 js /css
function loadjscssfile(filename, filetype) {
if (filetype == "js") { //判定文件类型
var fileref = document.createElement('script')//创建标签
fileref.setAttribute("type", "text/javascript")//定义属性type的值为text/javascript
fileref.setAttribute("src", filename)//文件的地址
}
else if (filetype == "css") { //判定文件类型
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
2. 示例代码
//初始化左侧 管理菜单
function InitLeftMenu() { var flag = false; //标识，表示页面上数据还未处理完成 $("#side-menu").empty();
var menulist = ' <li class="nav-header"><div class="dropdown profile-element">';
menulist += '<span><img alt="image" class="img-circle" src="/WebClient/static//BC.P.plus/img/profile_small.jpg" /></span>';
menulist += '<a data-toggle="dropdown" class="dropdown-toggle" href="#" rel="external nofollow" rel="external nofollow" >';
menulist += '<span class="clear">';
menulist += '<span class="block m-t-xs"><strong class="font-bold">OCP-admin</strong></span>';
menulist += '<span class="text-muted text-xs block">管理员<b class="caret"></b></span>';
menulist += '</span>';
menulist += '</a>';
menulist += '</div>';
menulist += '<div class="logo-element"> QPTS </div>';
menulist += '</li>';
//同步获取
$.ajax({
type: 'GET',
url: '/Handler/MenuPermissionsASHX.ashx?Func=GetEasyUIMenuList',
async: false,//同步
dataType: 'json',
success: function (json) {
_menus = eval('(' + json.data + ')'); $.each(_menus.menus, function (i, n) {
menulist += "<li>";
menulist += '<a href="#" rel="external nofollow" rel="external nofollow" > <i class="fa fa fa-bar-chart-o"></i><span class="nav-label">' + n.menuname + '</span><span class="fa arrow"></span></a> ';
menulist += '<ul class="nav nav-second-level">';
$.each(n.menus, function (j, o) { menulist += '<li><a class="J_menuItem" href="' + o.url + '" rel="external nofollow" title="' + o.menuname + '">' + o.menuname + '</a></li> '; })
menulist += '</ul>';
menulist += '</li>';
}) flag = true;
$("#side-menu").html(menulist); },
error: function (xhr, status, error) {
alert("操作失败"); //xhr.responseText
}
}); var loadFile; loadFile = setInterval(function() {//定时检测
if(flag) {//如果数据已经处理完毕
loadjscssfile('static/Bootstrap/css/bootstrap.min.css', "css"); //加载你的css文件
loadjscssfile('static/jQuery/jquery-2.1.1.js', "js"); //加载你的js文件
loadjscssfile('static/Bootstrap/js/bootstrap.min.js', "js"); //加载你的js文件
clearTimeout(t);//取消定时检测节省开销
}
},50); }
ajax加载数据后只加载一次JS:
有时候会出现一种情况，每次ajax都会加载一次js，因此需要在JS设置一全局变量用于标记是否已经加载使其只加载一次:
js设置一个全局变量,第一次调用ajax之后加载js;第二次调用js不再执行加载js。
/**
* qlq写的 根据题库生成试卷的JS
*/
// 页面加载后执行的函数
var isLoad = false;// 记录是否已经加载
$(function() {
// alert($("select[name='exampaper.level'] option:selected").val())
searchQuestions(); /**
* 题库试题的提交按钮的点击事件
*/
$("#queryBankByn").click(function() {
searchQuestions();
});});
// 查询试题
var searchQuestions = function() {
$
.ajax({
url : contextPath + '/createPaper_bankGenePaper.action',
data : {
'level' : $(
"select[name='exampaper.level'] option:selected")
.val(),
'type' : $("select[name='type'] option:selected").val(),
'knowledgeType' : $(
"select[name='knowledgeType'] option:selected")
.val(),
'questionBankId' : $(
"select[name='questionBankId'] option:selected")
.val(),
},
async : true,
dataType : 'json',
type : 'POST',
success : showQuestions,
error : function() {
alert("ajax查询试题失败！")
}
});
}
// 显示到右边题库试题栏
var showQuestions = function(questions) {
$("#bankQuestions").html("");// 清空题
for (var i = 0, length = questions.length; i < length; i++) {
// 拼接单选题
if (questions[i].type == '单选题') {
var danxuan = "<li class='list-group-item el_drag' style='height: 30px;'><input type='checkbox' class='el_tiku_checkedButton'> <input type='hidden'"
+ "id='"
+ i
+ "' class='ques_id'> <!--放 id -->"
+ "<!--单选题 class = 'dan'--><div class='movie_box dan'><div class='tm_btitlt'>"
+ questions[i].question + "</div><ul class='wjdc_list'>";
// 拼接单选题选项
for (var j = 0, options_length = questions[i].options.length; j < options_length; j++) {
danxuan += "<li><label> <input type='radio' value=''><span>"
+ questions[i].options[j].optioncontent
+ "</span></label></li>";
}
danxuan += '</ul>'
+ '答案: <input type="hidden" class="ques_answer" value="'
+ questions[i].answer + '">' + questions[i].answer
+ '<br />'
+ '解析:<input type="hidden" class="ques_analy" value="'
+ questions[i].analysis + '">' + questions[i].analysis
+ '</div> <span class="el_unflod"> ∨</span></li>';
$("#bankQuestions").append(danxuan);
}
// 拼接多选题
if (questions[i].type == '多选题') {
var duoxuan = "<li class='list-group-item el_drag' style='height: 30px;'><input type='checkbox' class='el_tiku_checkedButton'> <input type='hidden'"
+ "id='"
+ i
+ "' class='ques_id'> <!--放 id -->"
+ "<!--单选题 class = 'dan'--><div class='movie_box duo'><div class='tm_btitlt'>"
+ questions[i].question + "</div><ul class='wjdc_list'>";
// 拼接多选题选项
for (var j = 0, options_length = questions[i].options.length; j < options_length; j++) {
duoxuan += "<li><label> <input type='checkbox' value=''><span>"
+ questions[i].options[j].optioncontent
+ "</span></label></li>";
}
duoxuan += '</ul>'
+ '答案: <input type="hidden" class="ques_answer" value="'
+ questions[i].answer + '">' + questions[i].answer
+ '<br />'
+ '解析:<input type="hidden" class="ques_analy" value="'
+ questions[i].analysis + '">' + questions[i].analysis
+ '</div> <span class="el_unflod"> ∨</span></li>';
$("#bankQuestions").append(duoxuan);
}
// 拼接判断题
if (questions[i].type == '判断题') {
var panduan = "<li class='list-group-item el_drag' style='height: 30px;'><input type='checkbox' class='el_tiku_checkedButton'> "
+ "<input type='hidden' id='"
+ i
+ "' class='ques_id'> <!--放 id -->"
+ "<!--单选题 class = 'dan'--><div class='movie_box pan'><div class='tm_btitlt'>"
+ questions[i].question + "</div><ul class='wjdc_list'>";
// 拼接判断题选项
for (var j = 0, options_length = questions[i].options.length; j < options_length; j++) {
panduan += "<li><label> <input type='radio' value=''><span>"
+ questions[i].options[j].optioncontent
+ "</span></label></li>";
}
panduan += '</ul>'
+ '答案: <input type="hidden" class="ques_answer" value="'
+ questions[i].answer + '">' + questions[i].answer
+ '<br />'
+ '解析:<input type="hidden" class="ques_analy" value="'
+ questions[i].analysis + '">' + questions[i].analysis
+ '</div> <span class="el_unflod"> ∨</span></li>';
$("#bankQuestions").append(panduan); }
} loadjscssfile('js/examParper/addExamparper/tiku.js', "js"); // 动态加载从题库添加试题js
if (!isLoad) {
loadjscssfile('js/examParper/addExamparper/index3question.js', "js"); //
isLoad = true;
}
// 动态加载从js
}/**
* 动态加载 js /css函数 第一个参数代表url,第二个参数代表类型
*/
function loadjscssfile(filename, filetype) {
if (filetype == "js") { // 判定文件类型
var fileref = document.createElement('script')// 创建标签
fileref.setAttribute("type", "text/javascript")// 定义属性type的值为text/javascript
fileref.setAttribute("src", filename)// 文件的地址
} else if (filetype == "css") { // 判定文件类型
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
补充:
关于动态引入JS还有好几种方法，上面是采用createElement的方法创建元素之后appendChild()添加元素。比如常用的 document.write(“<script src….></script>”) 或者 采用jQuery改变script标签的src属性，再有可以用jQuery的append()方法向页面指定的元素中添加script标签。
但是需要注意的是引入JS的相互依赖关系，有时候我们引入的JS调用了其他JS的东西，所以我们需要注意动态引入JS的时机。
如果JS是独立的JS，我们可以写个一次性自调函数引入相关JS。
如果动态引入的JS中依赖其他JS，我们需要在页面加载完成后引入相关JS，但是需要注意使用window.onload引入。window.onload执行比jQuery慢，所以会在jQuery执行完才动态引入JS。
js与jQuery加载区别:
第二种解决办法:利用jQuery的事件委托机制:
