标签：event index mincoverfileInput function optionimg jq 监听 添加 click

 开发过程中经常会遇见这样的动态增加，而后面的按钮需要使用jq进行点击事件监听，我一开始的想法是循环增加时间监听，但是万万没想到啊，竟然不好使！！！

代码大致如下：

for（var i= 0；i < list.length;i++）{

            $("#mincoverfilePick_optionimg_" + index).on("click",function () {
                document.getElementById('mincoverfileInput_optionimg_' + i).click();
            });
            $("#mincoverfileInput_optionimg_" + index).on("change",  function () {
                uploadOptionFile($(this).val(),i);
            });
}

我原以为这样就完事了，这多简单。但是万万没想到，测试了一下。。。错了。。。

我在第一个 on 函数内增加了一条打印，我想看一下是不是没有找到 里面的对象，但是没有想到打印出来的竟然都是3！！！

然后我就开始在度娘上一顿查，最后我终于知道了，原来这种监听绑定在循环中不可以，需要用 bind 函数。于是我修改了代码：

            $("#mincoverfilePick_optionimg_" + index).bind("click", {i: index}, function (event) {
                var i = event.data.i;
                document.getElementById('mincoverfileInput_optionimg_' + i).click();
            });
            $("#mincoverfileInput_optionimg_" + index).bind("change", {i: index}, function (event) {
                var i = event.data.i;
                uploadOptionFile($(this).val(),i);
            });

这回测试好使是好使了，但是这个函数竟然执行了三次，我就又蒙圈了，后来发现原来是我每新增一条就绑定了一次，所以我这会添加了一个解除绑定：

            $("#mincoverfilePick_optionimg_" + index).unbind("click");
            $("#mincoverfilePick_optionimg_" + index).bind("click", {i: index}, function (event) {
                var i = event.data.i;
                document.getElementById('mincoverfileInput_optionimg_' + i).click();
            });
            $("#mincoverfileInput_optionimg_" + index).unbind("click");
            $("#mincoverfileInput_optionimg_" + index).bind("change", {i: index}, function (event) {
                var i = event.data.i;
                uploadOptionFile($(this).val(),i);
            });

到这里，终于是正常了。。。。舒坦。。。。

标签：event,index,mincoverfileInput,function,optionimg,jq,监听,添加,click
来源： https://www.cnblogs.com/17years/p/14867609.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。