on click events attached to domconstruct.placed nodes being handled by the wrong handler in dojo - dojo

Question

consider the following:
gridID = datagridID;
//column headers
domConstruct.place("<div class=\"gridheaderrow\" data-type =\"BolingerGridHeaderRow\" ></div>", gridID, "first");
var node = query("div[data-type=\"BolingerGridRow\"]", gridID);
var headerNode = query("div[data-type=\"BolingerGridHeaderRow\"]", gridID);
var cells = query("div[data-type=\"BolingerGridCell\"]", node[0]);
for (var i = 0; i < cells.length; i++)
{
var columnname;
columnname = attr.get(cells[i], "data-columnname");
var headernode = domConstruct.place("<div class=\"gridheadercell\" data-type=\"BolingerGridHeaderCell\">" + columnname + "</div>", headerNode[0], "last");
var sortup = domConstruct.place("<div id=column'" + i + "' data-columnupid = '" + i + "' data-type='sortuparrow' style='display:inline; cursor:pointer'>&#x25B2</div>", headernode, "last");
var sortdown = domConstruct.place("<div id=column'" + i + "' data-columndownid = '" + i + "' data-type='sortdownarrow' style='display:inline; cursor:pointer'>&#x25BC</div>", headernode, "last");
}
for (var i = 0; i < cells.length; i++)
{
var sortupnode = query("[data-columnupid = '" + i + "']", gridID)[0];
var sortdownnode = query("[data-columndownid = '" + i + "']", gridID)[0];
on(sortupnode, "click", function (e) {
var num = attr.get(sortupnode, "data-columnupid");
sort(true, num);
});
on(sortdownnode, "click", function (e) {
var num = attr.get(sortdownnode, "data-columndownid");
sort(false, num);
});
}
This code places little up and down arrows above each column and attaches on click events to them, which calls the sort function. I'm quite sure I'm attaching the events each up or down arrow once. Yet, no matter what arrow I click on the handler that handles it belongs to the arrow of the last column. Why is this? I'm figuring it has something to do with attaching handlers to nodes I just placed. Thoughts?

Answer 1

Variables do not have block scope in JavaScript. You are expecting that each iteration through your second for loop has its own sortupnode and sortdownnode variables, but in fact each time through the loop, the same variable is being redeclared and its value is being replaced. Your on handlers are continuing to reference the same sortupnode and sortdownnode variables, which by the time they run, will always reference the very last nodes iterated.
In this case the absolute simplest fix would likely be to replace sortupnode and sortdownnode inside your event handlers with this, which should reference the element that the handler fired for. However, you should be able to avoid this issue completely and hook up these event handlers much more efficiently using event delegation. Something along the lines of:
on(document.getElementById(gridID), '[data-columnupid]:click', function (event) {
// Inside delegated event handlers registered with dojo/on,
// `this` references the element that matched the selector
var num = this.getAttribute('data-columnupid');
sort(true, num);
});
Addendum
In response to your second comment: the problem you are facing has no direct correlation to event handling; it is purely related to how scope works in JavaScript.
To attempt to better illustrate how the variables in your loops are actually working, bear in mind that this:
for (var i = 0; i < ...; i++) {
var foo = ...;
...
}
... is essentially equivalent to this, because JavaScript variables do not have block scope:
var i;
var foo;
for (i = 0; i < ...; i++) {
foo = ...;
...
}
That is to say, the variable foo exists in the scope of the surrounding function, not the for loop. The same foo variable has its value modified each time through the loop.
Any code that looks at foo after the loop finishes running will see the last value foo was assigned in the loop. You are defining event handler callbacks in each iteration through your loop which have access to foo from the containing function's scope, but those callbacks are only actually called way later when the user performs an action. "Way later" = after the loop finished running = foo is always going to be the value it was set to during the last iteration.