Question

晚安，

我在设置onkeyup事件时遇到问题。当用户在文本字段中输入文本时，我试图让它触发对象方法。它似乎没有找到对象。我已经减少了代码并制作了以下示例：

<!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>

更新：搜索ReportObjArray中的对象并匹配正确的对象时，它会起作用。但是，我想知道是否有更有效的方法，而不是每次都要查看数组。

            empnoInput.onkeyup = function (event) {
                // Update Report Objects empno field
                var target_id = document.getElementById(event.target.id).id;
                for (j = 0; j < ReportObjArray.length; j++) {
                    if (target_id = ReportObjArray[j].id) {
                        ReportObjArray[j].UpdateEmpno(document.getElementById(event.target.id).value,empnoInput.id);
                        break;
                    }
                }
            };

Answer 1

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

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

工作JS小提琴：

<强> http://jsfiddle.net/23vkS/

动态数组上的onkeyup事件

1 个答案: