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

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

详情可以看这里

以下是以前写的原文

---

项目中遇到了一个问题：需要循环创建多个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);
            }