Wierd dynamic onclick eventhandler assign issue
<pre><code>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 &amp;&amp; newOrderby[s] != null) {
            var ob = newOrderby[s];
            cell.onclick = function() { SetOrderBy(ob); AutoComplete(null, 'txtSearch'); };
            cell.style.cursor = "pointer";
        }

        row.appendChild(cell); 
    }
}
</code></pre>

<p>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.</p>

<p>The problem is that in the end the event on each <code>&lt;th&gt;</code> 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 <code>&lt;th&gt;</code> 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.</p>

<p>Anyone know what I might be doing wrong here?</p>
