Javascript 动态数组上的onkeyup事件_Javascript_Jquery_Keyboard Events

Javascript 动态数组上的onkeyup事件

javascript jquery

Javascript 动态数组上的onkeyup事件,javascript,jquery,keyboard-events,Javascript,Jquery,Keyboard Events,晚上好, 设置onkeyup事件时遇到问题。我试图让它在用户向文本字段输入文本时触发一个objects方法。它似乎找不到目标。我减少了代码，并制作了以下示例： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> &l

晚上好,

设置

onkeyup

事件时遇到问题。我试图让它在用户向文本字段输入文本时触发一个objects方法。它似乎找不到目标。我减少了代码，并制作了以下示例：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>

        var ReportModule = new function () {

            function ReportObj(id, title) {

                this.id = id;
                this.title = title;
                this.result = "";
                this.empno = "";

                this.UpdateEmpno = function (empNo, resultBoxID) {
                    this.empno = empNo;
                    $(resultBoxID).update("Result: " + empNo);
                };
            };

            var ReportObjArray = new Array();

            var test1 = new ReportObj("box1", "First object");
            var test2 = new ReportObj("box2", "Second object");

            ReportObjArray.push(test1);
            ReportObjArray.push(test2);


            this.Initialize = function () {
                for (i = 0; i < ReportObjArray.length; i++) {

                    var container = document.createElement("div");
                    container.id = ReportObjArray[i].id;
                    container.textContent = ReportObjArray[i].title;
                    $('#Container').append(container);

                    var empnoInput = document.createElement("input");
                    empnoInput.type = "text";
                    empnoInput.id = ReportObjArray[i].id + "_Empno";

                    empnoInput.onkeyup = function (event) {
                        // Update Report Objects empno field
                        ReportObjArray[i].UpdateEmpno(empnoInput.value,empnoInput.id);    // <-------- Undefined here
                    };

                    $('#' + ReportObjArray[i].id).append(empnoInput);

                    var container2 = document.createElement("div");
                    container2.id = ReportObjArray[i].id + "_result";
                    container2.style.border = "1px solid black";
                    container2.style.width = "100px";
                    container2.textContent = "Result:";
                    $('#' + container.id).append(container2);
                };
            };
        }
    </script>

        </head>
<body onload="ReportModule.Initialize()">
    <div id="Container"></div>
</body>
</html>

将for循环代码包装在闭包中：

for (i = 0; i < ReportObjArray.length; i++) {
    (function(i) {
        // code
    })(i);
}

for（i=0；i


工作小提琴：
这是一个相当不幸的简单JavaScript和jQuery的混合体；您可以查看.data（）
将任意数据传递到输入元素；这不是很好，但它显示了您可以用jQuery做什么。谢谢您的回答！你能给我一个更详细的解释为什么这样做吗？为什么当我没有将循环封装在一个存储模块中时，ReportObjArray[i]是未定义的？看看这个例子。当您不将代码包装在闭包中时，i将始终是它设置的最后一个值。
for (i = 0; i < ReportObjArray.length; i++) {
    (function(i) {
        // code
    })(i);
}