关于 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
【当你用心写完每一篇博客之后,你会发现它比你用代码实现功能更有成就感!】
