JQuery - acess object property inside event handler

Question

I am trying to do an extension to a div using jquery. The extension is called NunoEstradaViewer, and here is a sample of the code:

(function ($){

NunoEstradaViwer: {
  settings: {
     total: 0,
     format: "",
     num: 0;
  },
  init: function (el, options) {
   if (!el.length) { return false; }
        this.options = $.extend({}, this.settings, options);
        this.itemIndex =0;
        this.container = el;

        this.total = this.options.total;
        this.format = ".svg";
        this.num = 0;
  },
  generateHtml: function(){
   /*GENERATE SOME HTML*/

  $("#container").scroll(function(){
        this.num++;
        this.nextImage;
  })
  },
  nextImage: function(){

  /*DO SOMETHING*/

  }
});

My problem is that I need to access the value of this.num and call the function this.nextImage inside the handler function for the scroll event, but the object "this" refers to the scroll and not to the "NunoEstradaViewer". How can I access those elements?

Thank you

Hai Nguyen · Accepted Answer · 2012-05-18 14:41:58Z

2

Usually what I do in this case is to save the reference to "this" in a variable.

generateHtml: function(){
    /*GENERATE SOME HTML*/

    var self = this;

    $("#container").scroll(function(){
        self.num++;
        self.nextImage;
    })
}

answered May 18, 2012 at 14:41

Hai Nguyen

4,0591 gold badge22 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zzzzBov · Accepted Answer · 2012-05-18 14:50:39Z

1

The common solution is to store a reference to the desired context:

(function () {
    var self;
    self = this;
    $('#container').scroll(function () {
        self.doStuff();
    });
}());

An alternative method is to pass the context to the function:

(function () {
    $('#container').scroll({context: this, ..more data to pass..}, function (e) {
        e.data.context.doStuff();
    });
    //alternatively, if you're not passing any additional data:
    $('#container').scroll(this, function (e) {
        e.data.doStuff();
    });
}());

answered May 18, 2012 at 14:50

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

1 Comment

Nunoestrada Over a year ago

Thank you for your answers. I managed to do it this way: $('#container').bind('scroll',{viewer: this}, function(event){ event.data.viewer.num++; }

Collectives™ on Stack Overflow

JQuery - acess object property inside event handler

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related