關於 ajax 動態返回數據 css 以及 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);

        }

 

 

相關鏈接：http://www.cnblogs.com/lkf18/archive/2012/05/24/2515935.html