Question

I have this code:

  _trackit: function(){
  for(var key in this.items.sublinks){
     switch(key){
         case 'shoes':
            for(var innerkey in this.items.sublinks[key]){
                (function(){
                  $(innerkey).observe('click', (function(e){
                    Event.stop(e);
                    someClass.click_link( this.items.sublinks[key][innerkey],false)
                   }));
                 )(this);
            }  
         break;
     }
  }
 }

The hash I am passing in has a size of 2. But as you would guess both of the links (since the hash maps to links), are passing the last hash value to come through (someClass.click_link <- in here this value, this.item.sublinks[key][innerkey]).

I’ve tried using an innerfuction etc… but something is messing up. If I go to “inner function deep”, then this.items returns undefined.

Any help?

Answer 1

As others mentioned, you need to have an argument to receive the “this” you are passing. You will also need to pass copies of the “key” and “innerkey” variables, in order to avoid the closures inside for loops bug.

var make_event_listener = function(that, key, innerKey){
    return function(e){
        Event.stop(e);
        someClass.click_link( that.items.sublinks[key][innerkey], false)
    };
};

//...
for(var innerkey in this.items.sublinks[key]){
   $(innerkey).observe('click', make_event_listener(this, key, innerKey) );
}
//...

OF course, you can use an anonymous version of make_event_listener instead but I find this way more readable.