首页 > 代码库 > 关于 ajax 动态返回数据 css 以及 js 失效问题
关于 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="http://www.mamicode.com/WebClient/static//BC.P.plus/img/profile_small.jpg" /></span>‘; menulist += ‘<a data-toggle="dropdown" class="dropdown-toggle" href="http://www.mamicode.com/#">‘; 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="http://www.mamicode.com/#"> <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="http://www.mamicode.com/‘ + 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
关于 ajax 动态返回数据 css 以及 js 失效问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。