Why cannot access to variable inside function that assigned jquery object

Question

I cannot access button or container variable inside the functions. What's the problem?

var Site = {
    init: function () {
        $(".site .head .nav-bar .nav-button").click(function () {
            Site.Navigation.toggle();
            return false;
        });
    },
    Navigation: {
        container: $(".site .head .nav-bar .navigation"),
        button: $(".site .head .nav-bar .nav-button"),
        toggle: function () {
            if (this.button.hasClass("active")) {
                this.hide();
            }
            else {
                this.show();
            }
        },
        show: function () {
            this.button.addClass("active");
            this.container.slideDown();
            return false;
        },
        hide: function () {
            this.button.removeClass("active");
            this.container.slideUp();
            return false;
        }
        //another stuff
    }

}

$(document).ready(function () {
    Site.init();
});

Is it possible that your jQuery selectors are not returning any elements? Can we see some html? — Austen
– Austen, Commented Aug 9, 2013 at 22:02
@Austen when I call function directly from jquery object, It works: e.g. $(".site .head .nav-bar .nav-button").addClass("active"). — Sahar
– Sahar, Commented Aug 9, 2013 at 22:06
Check out kalley's fiddle. If you can't get it working using that, then bfavaretto is probably right and there is an issue with your script placement. — Austen
– Austen, Commented Aug 9, 2013 at 22:11

bfavaretto · Accepted Answer · 2013-08-09 22:18:14Z

4

I'm not absolutely sure, but I believe what's happening is that your selectors are not matching any elements, because they're called before the elements are added to the DOM. I mean these:

container: $(".site .head .nav-bar .navigation"),
button: $(".site .head .nav-bar .nav-button"),

Try moving your whole JavaScript to the end of the body (right before </body>).

Another possible solution is to only populate those properties from Site.init (currently, they're populated immediately when the object literal is declared:

var Site = {
    init: function () {

        this.Navigation.container = $(".site .head .nav-bar .navigation");
        this.Navigation.button = $(".site .head .nav-bar .nav-button");

        $(".site .head .nav-bar .nav-button").click(function () {
            Site.Navigation.toggle();
            return false;
        });
    },
    Navigation: {
        container: null,
        button: null,
        toggle: function () {
            if (this.button.hasClass("active")) {
                this.hide();
            }
            else {
                this.show();
            }
        },
        show: function () {
            this.button.addClass("active");
            this.container.slideDown();
            return false;
        },
        hide: function () {
            this.button.removeClass("active");
            this.container.slideUp();
            return false;
        }
        //another stuff
    }

}

edited Aug 9, 2013 at 22:18

answered Aug 9, 2013 at 22:03

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

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

3 Comments

Sahar Over a year ago

exactly. Why this happen? I run my init function after ready $(document).ready(function () { Site.init();

bfavaretto Over a year ago

That code runs before Site.init. The Navigation object is created immediately when the object literal is declared, and the values of container and button are already defined (as empty jQuery objects) when init runs. You can move that logic to init, e.g., this.Navigation.container = ...)

plalx Over a year ago

@Sahar, Don't do this, it's a very bad practice to put this kind of module definition code inside $(document).ready. Use the approach I suggested instead. What's happening is that the values are assigned to container and button way before Site.init is called, since the assignments are happening as soon as the object gets created.

plalx · Accepted Answer · 2013-08-09 22:08:44Z

2

It's because your elements probably don't exist yet when your object is defined, since the code isin't running after the DOM is ready.

You could modify your Site.init function to accept these element references as argument however.

   init: function (container, button) {
        var nav = this.Navigation;

        nav.container = container;
        nav.button = button;
    }

Then pass in the elements:

$(document).ready(function () {
    Site.init(/*containerEl*/, /*buttonEl*/);
});

answered Aug 9, 2013 at 22:08

plalx

43.8k7 gold badges77 silver badges94 bronze badges

1 Comment

Sahar Over a year ago

Upvoted. I added another init function for Navigation to do something like that.

Collectives™ on Stack Overflow

Why cannot access to variable inside function that assigned jquery object

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related