您的位置：首页 > Web前端 > JQuery

jQuery循环绑定不同参数的函数

2016-05-23 14:37 507 查看

重读博客发现自己以前跟个智障一样……这里直接用事件委托就行了= =|||

详情可以看这里

以下是以前写的原文

项目中遇到了一个问题：需要循环创建多个li，并且给每个li中的div绑定相同的带参函数。但是带参函数中的参数不同。

一开始直接使用下边的写法进行绑定：

for(var i = 0 ; i <data.list.length; i ++){
var li= document.createElement("li");
var filename =  data.list[i].filename;
var fid = data.list[i].fid;
//上传成功后显示文件名字（若太长则显示一部分+省略号...+扩展名），可下载的链接。
li.innerHTML="<a id='file_link_"+ fid
+ "' href='Download.action?fileid=" + data.list[i].fid+ "' title='" + filename + "'>"+decreaseString(filename,20,true)
+" </a><div id='delete_file_" + fid + "' class='changeid' style='position:relative;left:20px;margin-top:3px;margin-right:5px;width:15px;height:15px;float:right;'><span class='icon-remove' style='width:15px;height:15px;font-size:18px;color:#bdc3c7' "
+ "onmouseover=this.style.color='#e74c3c' "
+ "onmouseout=this.style.color='#bdc3c7'></span></div>";
storeObj.appendChild(li);
//按钮绑定函数
var delete_id = "delete_file_" + fid;
/*
$("#"+delete_id).on("click",function(){
removeUploadFile( fid, ty, task, divname,varname, max_len);
});
}

结果发现调用removeUploadFile函数的时候结果不对。这是因为，循环中只是绑定了removeUploadFile函数，并没有调用，调用的时候，removeUploadFile函数才会去查询他的参数，而这些参数中的fid，即data.list[i].fid中的i因为循环已经结束，所以是循环结束后剩下的那个值。此时，不论调用那一个div的removeUploadFile函数，其中的fid参数都是同一个了。

解决方法，jQuery的on()方法，在绑定事件函数的时候，可以给事件传入一个额外的数据。我们把需要的数据，作为额外数据传绑定给事件就可以了。

for(var i = 0 ; i <data.list.length; i ++){
var li= document.createElement("li");
var filename =  data.list[i].filename;
var fid = data.list[i].fid;
/*if( max_len != null && max_len !=undefined && max_len != 'undefined' ){

}*/
//上传成功后显示文件名字（若太长则显示一部分+省略号...+扩展名），可下载的链接。
li.innerHTML="<a id='file_link_"+ fid
+ "' href='Download.action?fileid=" + data.list[i].fid+ "' title='" + filename + "'>"+decreaseString(filename,20,true)
+" </a><div id='delete_file_" + fid + "' class='changeid' style='position:relative;left:20px;margin-top:3px;margin-right:5px;width:15px;height:15px;float:right;'><span class='icon-remove' style='width:15px;height:15px;font-size:18px;color:#bdc3c7' "
+ "onmouseover=this.style.color='#e74c3c' "
+ "onmouseout=this.style.color='#bdc3c7'></span></div>";
storeObj.appendChild(li);
//按钮绑定函数
var delete_id = "delete_file_" + fid;
//这里在绑定事件函数的时候，把我们需要的数据fid作为额外数据a传入的click事件。
$("#"+delete_id).on("click", {a: fid}, clickHandler);
}
//在函数中，取出click事件中的额外数据a，再传入removeUploadFile进行使用。
function clickHandler(event) {
var a= event.data.a;
removeUploadFile( a, ty, task, divname,varname, max_len);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 循环绑定闭包

相关文章推荐

新的分享

章节导航