Question

jquery的.html()动态遍历html代码后，对原有的css和js无法控制问题

一下代码片段是我在jquery中通过动态循环，把一段html代码通过jquery的.html()方法写进去的，现在，这个图片轮换的效果出不来，我看网上的说法，就是.html()后，对css和js不受控制，如何改写才能让我这段html代码中的css有效，尤其是data-rel是调用的外部js文件的图片轮换效果！请教，请教！
var i;
var tempstr="";
var allimgdivstr="";
$.each(tempresponse['data'],function(key,val){
i=key+1;
tempstr="<div class=\"ownpic gallery-item\">
<img src=\"__ROOT__/Uploads/"+val+"\" alt=\"gallery "+i+"\" />
<div class=\"overlay\">
<a href=\"__ROOT__/Uploads/"+val+"\" data-rel=\"lightbox\" class=\"fa fa-arrows-alt\"></a>
</div>
</div> ";
allimgdivstr+=tempstr;
});
$('#ImagesLightBoxOne').html(allimgdivstr);是不是直接在$('#ImagesLightBoxOne').html(allimgdivstr);后面加如下代码？

$('#ImagesLightBoxOne a').addClass("fa fa-arrows-alt");
$('#ImagesLightBoxOne a').attr("data-rel","lightbox");
$('#ImagesLightBoxOne div:odd').addClass("ownpic gallery-item");
$('#ImagesLightBoxOne div:even').addClass("overlay");

我加进去后，还是没有效果。#ImagesLightBoxOne是包含以上遍历html的div容器。

Answer 1

var flag = false; //标识，表示页面上数据还未处理完成
$.each(data,function(i,o) {
//你的代码

flag = true;//已经完成数据处理

});
var = t;

t = setInterval(function() {//定时检测
if(flag) {//如果数据已经处理完毕
load('你的js文件'); //加载你的js文件

clearTimeout(t);//取消定时检测节省开销
}
},50);

关键是你引入js文件执行的时机，页面上的数据还没有生成，但这个js已经执行了，由于找不到对应的元素，所以失效了，因为它只执行一次，数据处理完成以后它也不会再执行了。
上面代码提供的思路是检测数据是否已经处理完成，完成后再加载你需要的js文件，保证js的执行在数据处理完成之后。

追问

$.each()是循环遍历，flag=true连续执行？另外，我按照您的结构写了，还是没有实现效果。能不能在线帮助下，我的QQ：282161073

追答

请问您是如何引入js文件的？tempresponse['data']的具体数据是什么？

Answer 2

解决办法：将HTML元素动态添加到页面上后，重新调用一下轮播图开始的Js方法即可。因为页面onload的时候，轮播js代码执行过一次，那个时候这些HTML还没有在页面结构中。