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