Question

我在循环中创建html元素，并希望将事件处理程序附加到某些元素。这个处理程序需要知道触发事件的元素的id，所以我添加了元素id作为绑定函数的参数，但无论如何我在最后点击了什么元素，该函数总是收到id最后一个元素，而不是我点击的元素。

这是代码（下一个代码块中更简化的版本）（我使用jQuery，但这不是jQuery问题，只是一个JavaScript问题）

receiveObjects = function (JSONobj, StatusString, jqXHR) {
    var html, i, el;

    // error-handling is not shown here

    html  = '<table>';
    for (i = 0; i <  JSONobj.list.length; i++) {
        el = JSONobj.list[i];

        html += '<tr>';

        html += '<td class="td1" id="td1'+el.itemID+'">';
        html +=     '<table>';
        html +=         '<tr>';
        html +=             '<td><img id="up9x'+el.itemID+'" src="pics/arrowUp9.png" alt="" style="width:25px;height:66px;"></td>';
        html +=             '<td><img id="up3x'+el.itemID+'" src="pics/arrowUp3.png" alt="" style="width:25px;height:66px;"></td>';
        html +=             '<td><img id="up1x'+el.itemID+'" src="pics/arrowUp1.png" alt="" style="width:25px;height:66px;"></td>';
        html +=         '</tr>';
        html +=         '<tr>';
        html +=             '<td><img id="down9x'+el.itemID+'" src="pics/arrowDown9.png" alt="" style="width:25px;height:66px;"></td>';
        html +=             '<td><img id="down3x'+el.itemID+'" src="pics/arrowDown3.png" alt="" style="width:25px;height:66px;"></td>';
        html +=             '<td><img id="down1x'+el.itemID+'" src="pics/arrowDown1.png" alt="" style="width:25px;height:66px;"></td>';
        html +=         '</tr>';
        html +=         '<tr>';
        html +=             '<td colspan="3">';
        html +=                 '<div><button id="delete'+el.itemID+'" name="delete'+el.itemID+'" value="delete'+el.itemID+'">delete</button></div>';
        html +=                 '<div id="saveDiv'+el.itemID+'" style="display:none;">';
        html +=                     '<button id="save'+el.itemID+'" name="save'+el.itemID+'" value="save'+el.itemID+'">save</button>';
        html +=                 '</div>';
        html +=             '</td>';
        html +=         '</tr>';
        html +=     '</table>';
        html += '</td>';

        html += '<td class="td2" id="td2'+el.itemID+'">';
        html +=     '<table>';
        html +=         '<tr>';
        html +=             '<td>Titel&nbsp;</td>';
        html +=             '<td>';
        html +=                 '<input class="grau" type="text" id="inTitel'+el.itemID+'" size="30" maxsize="50" value="'+el.Titel+'">';
        html +=             '</td>';
        html +=         '</tr>';
        html +=         '<tr>';
        html +=             '<td>ET</td>';
        html +=             '<td>';
        html +=                 '<input class="grau" type="text" id="inET'+el.itemID+'" size="20" maxsize="30" value="'+el.ET+'">';
        html +=             '</td>';
        html +=         '</tr>';
        html +=         '<tr>';
        html +=             '<td>Text&nbsp;</td>';
        html +=             '<td>';
        html +=                 '<textarea class="grau" id="inText'+el.itemID+'" rows="4" cols="30">'+el.Text+'</textarea>';
        html +=             '</td>';
        html +=         '</tr>';
        html +=     '</table>';

        html +=     '<button id="loadPdf'+el.itemID+'" name="loadPdf'+el.itemID+'" value="loadPdf'+el.itemID+'">upload pdf</button>';
        html += '</td>';

        html += '<td class="td3" id="td3'+el.itemID+'">';
        html +=     '<img src="'+el.pic+'">';
        html +=     '<div>';
        html +=         '<button id="newPic'+el.itemID+'" name="newPic'+el.itemID+'" value="newPic'+el.itemID+'">create pic from pdf</button> ';
        html +=     '</div>';
        html += '</td>';

        html += '</tr>';

    }

    html += '</table><div class="ErrorMsg" id="changeRedError"></div>';

    $('#workBlock').html(html);

    //after the elements are inserted into the dom, the eventhandlers should be binded:

    for (i = 0; i <  JSONobj.list.length; i++) {
        el = JSONobj.list[i];

        $('#up9x'+el.itemID).on('click',function(){evHd.clickMove(el.itemID,-9);})
        $('#up3x'+el.itemID).on('click',function(){evHd.clickMove(el.itemID,-3);})
        $('#up1x'+el.itemID).on('click',function(){evHd.clickMove(el.itemID,-1);})
        $('#down9x'+el.itemID).on('click',function(){evHd.clickMove(el.itemID,9);})
        $('#down3x'+el.itemID).on('click',function(){evHd.clickMove(el.itemID,3);})
        $('#down1x'+el.itemID).on('click',function(){evHd.clickMove(el.itemID,1);})

        $('#delete'+el.itemID).on('click',function(){evHd.clickDelete(el.itemID);})

        $('#save'+el.itemID).on('click',function(){evHd.clickSave(el.itemID);})

        $('#inTitel'+el.itemID).on('change keyup paste mouseup',function(){evHd.changed(el.itemID);})
        $('#inET'+el.itemID).on('change keyup paste mouseup',function(){evHd.changed(el.itemID);})
        $('#inText'+el.itemID).on('change keyup paste mouseup',function(){evHd.changed(el.itemID);})

        $('#loadPdf'+el.itemID).on('click',function(){evHd.clickLoadPdf(el.itemID);})

        $('#newPic'+el.itemID).on('click',function(){evHd.clickNewPic(el.itemID);})
    }
}

问题必须放在我将id（el.itemID）附加到事件处理函数的方式中。简化为：

for (i = 0; i < 500; i++) {
    el = JSONobj.list[i];
    $('#prefix'+i).on('click',function(){
        handler(i); //this seems to be problematic
    })
}

我想我知道问题在哪里，但我不知道如何解决它。你能帮忙吗？

Answer 1

这是一个非常常见的错误，因为JavaScript的闭包概念（函数加上指向函数体中已引用的函数外的所有变量的指针）。您可以使用 IIFE （立即调用的函数表达式）解决此问题：

for (i = 0; i < 500; i++) {
  (function(num) {
    $('#prefix' + num).on('click',function() {
      handler(num);
    })
  })(i);
}

这个立即调用的函数将创建一个新范围，从而在i中保存了正确的num。否则，JavaScript的闭包（函数将指针放在i上，因此在for循环结束后始终引用500）将使您的事件处理程序变得混乱。

在for循环中绑定事件处理程序

1 个答案: