for 루프에서 이벤트 핸들러 바인딩

루프에서 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);})
    }
}

el.itemID이벤트 처리기 함수에 ID ( )를 연결하는 방식에 문제가 있어야합니다 . 쉽게 한:

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

문제가 어디에 있는지 알고 있지만 어떻게 해결해야할지 모르겠습니다. 도와 주 시겠어요?