CODEWITHSUNDEEP
javascriptjqueryclassscope
Tigoes
Tigoes

Reputation: 31

JavaScript (jquery) - Scope issue in click event

I know this subject has been already discussed in similar topics, but none of the solutions I could find can help me understand the issue I have.

Here is my simplified class and its the usual was I define them.

BottomNav = function() {
  this.init();
}

$.extend(BottomNav.prototype, {
  init: function(){

      this.insue = false;

     $(".up").click($.proxy(function () {
            var thisinuse = this.inuse;
            if(this.inuse===false) {
              this.inuse = true;
              this.moveSlider('up');
        }
     },this));
  },
  moveSlider: function(d){
    //some instructions
        alert('move slider');
  } 
 });


$(document).ready(function() {
    new BottomNav();
});

In FireBug on the breakpoint inside the click event this.inuse is undefined! (this is my problem), my scope looks good on the watch (right panel of firebug), this.insue is false as it should be - sorry I cannot post images yet!

I would be grateful of someone might help identifying this very strange behavior.

I tried some staff like putting the click event definition inside another function but it does not work either. I tried different ways of bindings and it does not work too.

However the below example is working on a number of other classes I made. I could access class scope from events, effects.

Upvotes: 0

Views: 126

Answers (2)

Bergi
Bergi

Reputation: 664630

It's just a typo:

  this.insue = false;

Change insue to inuse and the property will be there :-)

Apart from that, the variable thisinuse is quite superfluous in here. And change the condition to if(! this.inuse) instead of comparing to booleans…

Upvotes: 2

jagzviruz
jagzviruz

Reputation: 1513

this.inuse can be assigned to a variable out side your click event handler and use the variable inside the handler.

Upvotes: 0

Related Questions