ajax html css 失效,关于 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 = '

';

menulist += '';

menulist += '';

menulist += '';

menulist += 'OCP-admin';

menulist += '管理员';

menulist += '';

menulist += '';

menulist += '

';

menulist += '

QPTS

';

menulist += '

';

//同步获取

$.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 += "

";

menulist += ' ' + n.menuname + ' ';

menulist += '

• ';

$.each(n.menus, function (j, o) {

menulist += '

' + o.menuname + ' ';

})

menulist += '

';

menulist += '

';

})

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 失效问题(动态引入JS)

ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了 1.公共方法 load //动态加载 js /css function ...

ajax请求返回数据，模板中的数据处理

/*ajax请求返回数据,模板中的数据处理*/ function QueryGameAsset(){ var new_start_time=$('#new_start_time').val();//开 ...

echarts通过ajax动态获取数据的方法

echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...

$.ajax请求返回数据中status为200，回调的却是error?

$.ajax({ type:'get',//使用get方法访问后台 dataType:'json',//访问json格式的数据 url:'http://job.hainan.net/api/recru ...

用JavaScript动态加载CSS和JS文件

本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

关于ajax请求数据后，数据本身的js失效的一些想法

今天遇到一个头疼的问题.我做一个左右翻页效果(客户要求能够无限翻页),所以只能动态请求数据,进行局部刷新操作. 这时候问题就出来了,当我请求翻页的时候,数据通过js填充到div里面,但这些数据,自身带 ...

nginx实现动态分离,解决css和js等图片加载问题

改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

ajax正确返回数据，却进入了error分支

.net 开发: $.ajax({ type: "POST", //post没有数据量限制 url: "ashx/PostHandle.ashx", data: ...

js实用方法记录-js动态加载css、js脚本文件

js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...

随机推荐

js 所有事件列表

javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

COUNT()函数的使用

COUNT函数 让我们能够数出在表格中有多少笔资料被选出来.它的语法是: SELECT COUNT("栏位名")        FROM "表格名" 举例来说, ...

js点击事件防止用户重复点击执行

点击事件里给button标签加一个自定义属性,存上次点击时间 追问: 求详细代码,JS 真心的没怎么做过 追答:  

SAP高可用性(HA)

1.SAP系统高可用的要求 高可用性是从终端用户的角度来需求,及要求最大化系统的可用性.其目的是降低意外系统关闭时间(服务器生效.存储失效.操作系统失败--),减少预期系统关闭时间(系统及架构的维护. ...

Java之泛型编程

1.概念 泛型就是参数化类型.泛型的好处是在编译的时候检查类型安全,并且所有的强制转换都是自动和隐式的,提高代码的重用率. 2.案例 1)先看下面案例: //不适用泛型编程 Apple app0=ne ...

mysql 重置密码

mysql 重置密码,跳过登录修改密码: # centos 上mysql 已经改名了,启动服务的时候注意是mariadb 了!!!!! # systemctl stop mariadb # syste ...

Web大前端面试题-Day6

1.请说明ECMAScript, JavaScript, Jscript之间的关系? ECMAScript提供脚本语言必须遵守的规则. 细节和准则,是脚本语言的规范. 比如:ES5,ES6就是具体的一 ...

MongoDB探索之路(二)——系统设计之CRUD

1.构造实体类 using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

基于html5海贼王单页视差滚动特效

分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览   源码下载 实现的代码:

< ...

java Enum 类型互转

refer:enum与int.String之间的转换http://www.blogjava.net/wangxinsh55/archive/2012/11/07/390958.html enum&lt ...