Why doesn't the click handler work on this Raphael object?

Question

My current project is a heat map of the United States:

http://up.massrelevance.com/cnbc/top-states/heatmap.html

It's rendered with the help of Raphael and a couple of prepackaged libraries to generate the paths for the states. At some point in my code, I generate an array of references to the Raphael object representing each state; then I iterate over them, attaching a click handler to each (the actual Raphael object is stored in projection.map) using Raphael's .click() method:

Heatmap.prototype.stateClick = function() {
  var projection, 
      state, 
      _this = this;
  for (state in this.projections) {
    projection = this.projections[state];
    console.log(state);
    console.log(projection.map[0]);
    (function(state, projection) {
      projection.map.click(function() {
        _this.overlay.update(state, _this.states[state]);
        _this.overlay.reveal();
      });
    })(state, projection);
  }
};

This works fine for 48 of the 50 states. However, for some reason, Alaska (AK) and Oklahoma (OK) don't seem to get the click handler - that is, when I click them, nothing happens.

Watching the console for the output of the console.log calls in the code above, I can't see any differences between the Raphael objects for AK & OK from any other state's object, so I'm baffled as to what the cause may be.

Can anyone determine or guess what's happening, or maybe suggest how I might debug this further? Is there anything about how these shapes are drawn (e.g., maybe not with fully closed paths?) that may cause the click handler to fail to attach?

Answer 1

Sheesh, figured it out. I had made a typo in the state code for Alaska (AK), instead using OK. That explains why those were the two problem states. I was digging into this for well over an hour until after a break, with a fresh set of eyes, I spotted the typo immediately.