关于 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"> &or;</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"> &or;</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"> &or;</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