Question

function AddTableHeader(table, cells, newOrderby) {
    var head = table.createTHead();
    var row = head.insertRow(0);
    row.className = "SupplierDataTableTr";
    for (var s in cells) {
        var cell = null; 
        cell = document.createElement("th");
        cell.innerHTML = cells[s];
        cell.className = "SupplierDataTableTh";
        if (newOrderby != null && newOrderby[s] != null) {
            var ob = newOrderby[s];
            cell.onclick = function() { SetOrderBy(ob); AutoComplete(null, 'txtSearch'); };
            cell.style.cursor = "pointer";
        }

        row.appendChild(cell); 
    }
}

Inside the if-statement I set the variable ob = string in the array.. at the moment the array contains “SupplierNr”, “Name”, “Email”, “Phone” and has the same order as the cells array.

The problem is that in the end the event on each <th> tag has the last newOrderby string attached to it which is “Phone”. I’ve looped through this part in my debugger and it sets different orderby strings to each event in the loop, but for some reason all <th> elements gets the last eventhandler created. Why is this? The cell is created in a for loop and should be local, they shoulnd’t have anything to do with eachother.

Anyone know what I might be doing wrong here?

Answer 1

If you’re assigning event handlers in a loop, then you probably need to use a closure to ensure that it works properly. Otherwise you get the problem you’re describing.

Similar issue and solution here: Event handlers inside a Javascript loop – need a closure?