javascript - 如何将动态创建的变量传递给 JavaScript 的 addEventListener

Question

这个问题类似于THIS ONE ，但是看完还是没能解决我的问题。

基本上，我试图使下表的大小动态变化。另外，当一个值改变时，我希望它更新底层的 JavaScript 函数。

**但是我无法弄清楚如何既唯一地引用元素又传递相关参数来更新对象。 updatePlanner() 在更改时调用，但传递的值始终是最后创建的唯一 ID:在本例中为“2-11”。我究竟做错了什么？ **

这是我的初始对象:

builerObj.dataArray = [4,3,[[[5, .65, 0],[5, .75, 0],[5, .85, 1]], 
                            [[3, .70, 0],[3, .80, 0],[3, .90, 1]],
                            [[5, .75, 0],[3, .85, 0],[1, .95, 1]],
                            [[5, .40, 0],[5, .50, 0],[5, .60, 0]]]];

这是更新它的函数(注意我通过元素的 Id 来引用它的值):

function updatePlanner(passedId, week, set, index) {
    var value = document.getElementById(passedId).value;

    // I've removed some irrelevant manipulation of the value variable

    builerObj.dataArray[2][week][set][index] = value;

        columns = $('#planBuilderWeeks')[0].value; // columns
        rows = $('#planBuilderSets')[0].value; // rows
        createPlanningTable(columns, rows);

}

这是表格生成器(删除了样式代码):

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

    // Styling and Headers are here

    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();
            var currID = i.toString() + "-" + j.toString(); // Unique ID for each input

            if (j % 3 == 0 ){              // This handels all columns labeled '%Max'
                var currItem = document.createElement('input');
                currItem.value = builerObj.dataArray[2][week][i][0];
                currItem.addEventListener("change", function(){
                     updatePlanner(currID, week, i, 0); // This is where I haven't been able to make it work
                }, false);
            } else if (j % 3 == 1){        // This handels all columns labeled 'Reps'
                var currItem = document.createElement('input');
                currItem.value = builerObj.dataArray[2][week][i][1];
            } else if (j % 3 == 2){        // This handels all columns labeled '+'
                var currItem = document.createElement('button');
                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;
            } else {
                alert("Something went wrong");
            }

            currItem.setAttribute("id", currID);   
            td.appendChild(currItem);
        }
    }
    body.innerHTML = "";
    body.appendChild(tbl);
}

Answer 1

currID 在监听器执行时进行评估。在那一刻，currID 已经达到了它的最后一个值。您可以将值传递给 updatePlanner，而不是传递 id，如下所示:

function updatePlanner(value, week, set, index) {

然后调用是:

updatePlanner (this.value, week, i, 0);

但请注意，'week' 和 'i' 也已经达到了它们的最后一个值。我注意到您在 updatePlanner 函数中使用了 JQuery。 JQuery 的“.on”函数可以为您记住正确的值。这是解决方案:

         if (j % 3 == 0 ){ 
             var currItem = document.createElement('input');
             var eventData = { week : week, set : i };
             $(currItem).on("change", null, eventData, function(event){
                 updatePlanner(event.target.value, event.data.week, event.data.set, 0);
             });