jq 循环添加监听事件遇到的坑

Posted 2021-06-09 拾柒年

jq循环绑定监听事件

 

 

 开发过程中经常会遇见这样的动态增加，而后面的按钮需要使用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);
            });

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