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

最新推荐文章于 2021-09-26 23:39:07 发布

Creabine

最新推荐文章于 2021-09-26 23:39:07 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：实践思考 JavaScript/jQuery 文章标签： jquery 循环绑定闭包

本文链接：https://blog.youkuaiyun.com/Creabine/article/details/51481362

JavaScript/jQuery 同时被 2 个专栏收录

77 篇文章

订阅专栏

实践思考

46 篇文章

订阅专栏

本文探讨了在JavaScript编程中遇到的一个常见问题：如何正确地为动态生成的DOM元素绑定事件处理器。通过实例展示了使用jQuery的on()方法及其数据传递功能解决循环绑定相同事件处理器时参数错误的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

详情可以看这里

以下是以前写的原文

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