undefined variable jQuery object

Question

I don't understand how to pass a variable from the init function to the bindEvent function in my object: At the moment, I get undefined.

var Fisheye = {
    init: function () {

        $('body').hide();

        $(window).load(function() {
            $('body').fadeIn('slow');

            this.imgs = $('.pic').children('img');
            this.originalWidth = $(imgs).first().css('width');
            this.minWidth = 300;

            imgs.width(300);

            Fisheye.bindEvents();

        });

    },

    bindEvents: function() {
        $(this.imgs).toggle(this.toggleClick, this.toggleClick);
        console.log(this.imgs); // Why do I get Undefined here?
    },

    toggleClick: function() {
        //Todo
    }
}


Fisheye.init();

How to properly pass a variable from a function to another in an object?

Thanks!

Chuck · Accepted Answer · 2012-06-02 10:11:41Z

You can do this :

var Fisheye = {

    init: function () {
        var _this = this;
        $('body').hide();
        $(window).load(function() {
            $('body').fadeIn('slow');
            _this.imgs = $('.pic').children('img');
            _this.originalWidth = $(_this.imgs).first().css('width');
            _this.minWidth = 300;
            _this.imgs.width(300);
            _this.bindEvents();
        });

    },

    bindEvents: function() {
        $(this.imgs).toggle(this.toggleClick, this.toggleClick);
    },

    toggleClick: function() {
        //Todo
    }
}


Fisheye.init();

The problem is that the "this" in you handler wasn't the instance of Fisheye but the window.

But you'll have a similar problem with the toggleClick. A solution for those could be to do this :

bindEvents: function() {
    var _this = this;
    var toggleFunction = function(){_this.toggleClick()};
    $(this.imgs).toggle(toggleFunction, toggleFunction);
},

khaled_webdev · Accepted Answer · 2012-06-02 10:13:38Z

0

rapidly just the structure , add param to the function

 bindEvents: function(imgs) {
    $(imgs).toggle(this.toggleClick, this.toggleClick);
    console.log(imgs); // Why do I get Undefined here?
},...

on init function

...
var imgs = ..
Fisheye.bindEvents(imgs);

answered Jun 2, 2012 at 10:13

khaled_webdev

1,43015 silver badges20 bronze badges

Collectives™ on Stack Overflow

undefined variable jQuery object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related