CODEWITHSUNDEEP
javascriptevent-handling
Hubert Schölnast
Hubert Schölnast

Reputation: 8517

Binding eventhandlers in a for-loop

I am creating html-elements in a loop, and want to attach event-handlers to some of the elements. This handlers need to know the id of the element that fired the event, so I added the elements id's as a parameter of the binded function, but anyway what element I click at the end, the function always received the id of the last element, not of the element that I clicked.

Here is the code (more simplified version in the next code-block) (I'm using jQuery, but this is not a jQuery-problem, just a JavaScript-problem)

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);})
    }
}

The problem must be located in the way how I attach the id (el.itemID) to the event-handler function. Simplified:

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

I think I know where the problem is, but I have no idea how to solve it. Can you help, please?

Upvotes: 0

Views: 20

Answers (1)

Stephan Max
Stephan Max

Reputation: 147

This is a very common mistake, due to JavaScript's concept of closures (function plus pointers to all the variables outside the function that have been referenced in the function body). You can solve this with an IIFE (immediately invoked function expression):

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

This immediately invoked function will create a new scope and thus have the correct i saved in num. Otherwise, JavaScript's closure (the function keeps a pointer on i and thus always references 500 after the for loop ended) will mess with your event handlers.

Upvotes: 2

Related Questions