如何引用在JavaScript中动态创建的输入的值

Question

我正在创建输入表。

更改输入后，更改事件应触发一个函数（ updatePlanner() ）来更改基础数据中的数据。 这是我创建表的地方。

function tableCreate(columns, rows){
    var body = document.getElementById('planBuilderTable'),
        tbl  = document.createElement('table');

    // header code removed

    for(var i = 0; i < rows; i++){
        var tr = tbl.insertRow();

        var week = 0;

        for(var j = 0; j < columns * 3; j++){
            var td = tr.insertCell();
            td.style.height = "26px";

            switch(j % 3){
                case 0:
                    var currItem = document.createElement('input');
                    currItem.value = builerObj.dataArray[2][week][i][0];
                    currItem.addEventListener("change", function(){
                        updatePlanner(this.value, week, i, 0);  //<-----------THIS IS MY ISSUE
                    });
                    break;
                case 1:
                    var currItem = document.createElement('input');
                    currItem.value = builerObj.dataArray[2][week][i][1];
                    break;
                case 2:
                    var currItem = document.createElement('button');
                    currItem.style.height = "26px";
                    currItem.style.border = "none";
                    currItem.style.padding = "0px";
                    currItem.style.display = "block";
                    var span = document.createElement('span');
                    if (builerObj.dataArray[2][week][i][2] == 1){
                        span.className = "glyphicon glyphicon-ok box";
                    } else{
                        span.className = "glyphicon box";
                    }
                    currItem.appendChild(span);
                    week += 1;
                    break;
            }

            currID = i.toString() + "-" + j.toString()
            currItem.setAttribute("id", currID);
            currItem.style.width = "40px";


            td.appendChild(currItem);
            td.style.border = '1px solid black';

        }
    }
    body.innerHTML = "";
    body.appendChild(tbl);
}

如您所见，我正在尝试使用this.value ，但这没有返回值。 我还尝试过分配ID并参考它：

        ...
        currID = i.toString() + "-" + j.toString();

            switch(j % 3){
                case 0:

                    var currItem = document.createElement('input');
                    currItem.setAttribute("id", currID);
                    currItem.value = builerObj.dataArray[2][week][i][0];
                    currItem.addEventListener("change", function(){
                        updatePlanner(document.getElementById(currID).value, week, i, 0);
                    });
                    break;
                    ...

Answer 1

this.value返回正确的值，但其他参数week和i没有您期望的值。 您希望它们在添加侦听器时具有值，但相反，它们在执行侦听器时具有值。 为了解决这个问题，您可以将这些值存储为输入标签中的属性，并在以后检索它们，如下所示：

    $(currItem).attr("data-week", week);
    $(currItem).attr("data-i", i);
    currItem.addEventListener("change", function(){
         var week_value = $(this).attr("data-week");
         var i_value = $(this).attr("data-i");
         updatePlanner(this.value, parseInt(week_value), parseInt(i_value), 0);
    }, false);

Answer 2

您可能会在这里寻找几件事情。 最简单的方法是将event参数添加到回调函数中，如下所示：

currItem.addEventListener("change", function(e){
  updatePlanner(e.target.value, week, i, 0);
});