关于ajax动态返回数据css以及js失效问题（动态引⼊JS）ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题，所以要动态加载 css ji等⽂件了
1.公共⽅法 load
//动态加载 js /css
function loadjscssfile(filename, filetype) {
if (filetype == "js") { //判定⽂件类型
var fileref = ateElement('script')//创建标签
fileref.setAttribute("type", "text/javascript")//定义属性type的值为text/javascript
fileref.setAttribute("src", filename)//⽂件的地址
}
else if (filetype == "css") { //判定⽂件类型
var fileref = ateElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref != "undefined")
}
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>';
java调用js的ajaxmenulist += '<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(_us, 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><                        menulist += '<ul class="nav nav-second-level">';
$.us, 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("操作失败"); //sponseText
}
});
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。
补充:
  关于动态引⼊JS还有好⼏种⽅法，上⾯是采⽤createElement的⽅法创建元素之后appendChild()添加元素。⽐如常⽤的
document.write("<></script>")  或者  采⽤jQuery改变script标签的src属性，再有可以⽤jQu
ery的append()⽅法向页⾯指定的元素中添加script标签。
  但是需要注意的是引⼊JS的相互依赖关系，有时候我们引⼊的JS调⽤了其他JS的东西，所以我们需要注意动态引⼊JS的时机。
  如果JS是独⽴的JS，我们可以写个⼀次性⾃调函数引⼊相关JS。
    如果动态引⼊的JS中依赖其他JS，我们需要在页⾯加载完成后引⼊相关JS，但是需要注意使⽤load引⼊。load执⾏⽐jQuery慢，所以会在jQuery执⾏完才动态引⼊JS。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。