关于 ajax 动态返回数据 css 以及 js 失效问题(动态引入JS)
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="#">\'; 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="#"> <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 + \'" 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的事件委托机制:
参考:http://www.cnblogs.com/qlqwjy/p/7767828.html
版权声明：本文为qlqwjy原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。