calling object method in jquery each loop - scope issue?

Question

My.Awesome.Obj = function() {
    return {
        // PUBLIC PROPERTIES
        legendObj:  null,

        // PUBLIC METHODS
        init: function() {
            this.assignLegendClick();
        },

        assignLegendClick: function() {
            console.log('*** drawLegend()');
            var checkboxes = this.legendObj.find("input");
            checkboxes.each(function() {
                $(this).click(function() {
                    this.handleLegendClick();
                });
            })
        },

        handleLegendClick: function() {
            console.log('*** handleLegendClick()');
        },

        EOF: null
    };
}();

So I'm getting an error saying

handleLegendClick is not defined

I'm assuming this is a scope issue, but I'm not sure how to refer back to the parent object within the loop...

Denys Séguret · Accepted Answer · 2012-11-29 20:44:53Z

3

The problem is that this is the window when the click event handler is called.

You might do this :

My.Awesome.Obj = function() {
    var obj = {
        // PUBLIC PROPERTIES
        legendObj:  null,

        // PUBLIC METHODS
        init: function() {
            obj.assignLegendClick();
        },

        assignLegendClick: function() {
            console.log('*** drawLegend()');
            var checkboxes = obj.legendObj.find("input");
            checkboxes.each(function() {
                $(this).click(function() {
                    obj.handleLegendClick(); // <=== replace this with obj
                });
            })
        },

        handleLegendClick: function() {
            console.log('*** handleLegendClick()');
        },

        EOF: null
    };
    return obj;
}();

answered Nov 29, 2012 at 20:44

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

3 Comments

hereandnow78 Over a year ago

not necessary to call obj.legendObj.find... in the assignLegendClick-function because at that point 'this' IS the object.

Denys Séguret Over a year ago

@hereandnow78 In fact it depends on how you call the function : if you copy the reference and call it without receiver, this ensures it's obj. But in most cases I agree it's useless, that's why I mentioned only the place where I've put a comment, which is the important one.

keeg Over a year ago

@destroy you were too fast, I still have to wait to be able to accept!

hereandnow78 · Accepted Answer · 2012-11-29 20:46:49Z

2

yes its a scoping issue right here:

assignLegendClick: function() {
  console.log('*** drawLegend()');
  var checkboxes = this.legendObj.find("input");
  checkboxes.each(function() {
    $(this).click(function() {
      this.handleLegendClick();
    });
  })

use a helper param to preserve the scope (usually called self or _self)

assignLegendClick: function() {
  console.log('*** drawLegend()');
  var self = this
    , checkboxes = this.legendObj.find("input");
  checkboxes.each(function() {
    $(this).click(function() {
      self.handleLegendClick();
    });
  })

answered Nov 29, 2012 at 20:46

hereandnow78

14.5k8 gold badges46 silver badges49 bronze badges

Collectives™ on Stack Overflow

calling object method in jquery each loop - scope issue?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related