解决javascript中循环给组件添加事件，只有一个最后一个组件添加成功。或者？全部添加失败。

最新推荐文章于 2023-08-01 17:32:30 发布

原创最新推荐文章于 2023-08-01 17:32:30 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #事件 #javaweb #闭包 #javaweb组件

本文探讨了JavaScript中闭包的使用，特别是在for循环中处理事件绑定时避免常见陷阱的方法。通过实例说明如何利用闭包保存变量状态，确保每个事件处理器都能正确获取预期的变量值。

问题产生的原因

页面加载---->for循环执行（结束条件：i<6为例），执行完之后，i最后的值是6---->这时候事件要触发了，事件触发调用的这个function，它拿到的值是i=6–>导致最后一个事件都没有成功被触发。

问题解决方法

第一种：常用的方法是：使用闭包把i值封存

for(var i =0 ; i < 6 ; i++){
(function(i){添加事件的代码}(i);
}

上面用到的解决方法是使用闭包把i值封存了。

第二种：IE11以前不支持的方法是：用let块作用域变量，原理也是闭包

for(var i =0 ; i < 6 ; i++){
let j = i;
添加事件的代码(里面用j就OK了);
}

这是我在做东西时候的部分代码，就是这段代码让我在坑了栽了。ahh

<script>
        var name;
        var gender;
        var age;
        var nativeplace;
        var qq;
        var email;
        var email_old;

        for (var i = 0; i < 6; i++) {

            var update = document.getElementById("update" + i);
            (function(i){
            update.onclick = function () {
    
                name = document.getElementById("name" + i).innerText;
                gender = document.getElementById("gender" + i).innerText;
                age = document.getElementById("age" + i).innerText;
                nativeplace = document.getElementById("nativeplace" + i).innerText;
                qq = document.getElementById("qq" + i).innerText;
                email = document.getElementById(i + "").innerText;

                email_old = email;

                var update = document.getElementById("update" + i);

                update.innerText = "提交";
                update.setAttribute("class", "btn btn-success");

                var name_ele = document.getElementById("name" + i);
                var gender_ele = document.getElementById("gender" + i);
                var age_ele = document.getElementById("age" + i);
                var nativeplace_ele = document.getElementById("nativeplace" + i);
                var qq_ele = document.getElementById("qq" + i);
                var email_ele = document.getElementById("" + i);

                var name_input = document.createElement("input");
                var gender_input = document.createElement("input");
                var age_input = document.createElement("input");
                var nativeplace_input = document.createElement("input");
                var qq_input = document.createElement("input");
                var email_input = document.createElement("input");

                name_input.value = name;
                gender_input.value = gender;
                age_input.value = age;
                nativeplace_input.value = nativeplace;
                qq_input.value = qq;
                email_input.value = email;

                name_ele.innerText = "";
                gender_ele.innerText = "";
                age_ele.innerText = "";
                nativeplace_ele.innerText = "";
                qq_ele.innerText = "";
                email_ele.innerText = "";

                name_ele.appendChild(name_input);
                gender_ele.appendChild(gender_input);
                age_ele.appendChild(age_input);
                nativeplace_ele.appendChild(nativeplace_input);
                qq_ele.appendChild(qq_input);
                email_ele.appendChild(email_input);

                update.onclick = function () {
                    name = name_input.value;
                    gender = gender_input.value;
                    age = age_input.value;
                    nativeplace = nativeplace_input.value;
                    qq = qq_input.value;
                    email = email_input.value;

                    update.href = "UpdateTableServlet?email_old="
                        + email_old + "&name="
                        + name + "&gender="
                        + gender + "&age="
                        + age + "&nativeplace="
                        + nativeplace + "&qq="
                        + qq + "&email="
                        + email;
                }
            }
        })(i);
        }
    </script>