In this line of code: > $('.menu_button').click(this.onClick);
you are getting a refernece to your onClick function. But that's all you get - a *function* reference. It doesn't remember that you said 'this.onClick' to get that reference. As you found, when that function gets called later by jQuery's click event code, 'this' means something else entirely - it's a reference to the element receiving the event. The classic way of fixing this (pun intended) is to use a closure. You could change that line of code to: var bar = this; $('.menu_button').click( function() { bar.onClick(); }); But food for thought: How many MenuBar instances will you be creating? Just one or a small number? Then you can simplify the code considerably by not using a prototype. Instead, put the methods inside the constructor and use a closure for all your object references: function MenuBar() { var bar = this; bar.currentIndex = 0; $('.menu_button').click(onClick); function onClick(evt) { bar.currentIndex = 1; bar.select(bar.currentIndex); }; bar.select = function(index) { //code goes here }; }; The idea is to get 'this' into a local variable ('bar') right away, and then use 'bar' everywhere that you would have used 'this'. onClick doesn't need to be a method of the object because you would never call it directly, so it's just a nested function. I assume that Select() would be called as an object method and left it as such - but I changed its name to select(). Standard JavaScript practice is to use an initial capital letter in constructors only, and initial lowercase for other functions and methods. I left currentIndex as a property of the object, but if you only need it inside the constructor and object methods, you can do it this way instead: function MenuBar() { var bar = this; var currentIndex = 0; $('.menu_button').click(onClick); function onClick(evt) { currentIndex = 1; bar.select(currentIndex); }; bar.select = function(index) { //code goes here }; }; You can also use an anonymous function for onClick: function MenuBar() { var bar = this; var currentIndex = 0; $('.menu_button').click( function(evt) { currentIndex = 1; bar.select(currentIndex); }); bar.select = function(index) { //code goes here }; }; -Mike > From: mrtedweb > > Hello everyone, > > I'm new to jQuery and need some help with a trivial question. > I'm trying to program a menu bar and I'm having problems with > variable scope. Below is a snippet of my code: > > // > ************************************************************** > **************************************** > <script type="text/javascript"> > $(document).ready(function() > { > var menubar = new MenuBar(); > }); > </script> > > <script type="text/javascript"> > function MenuBar() > { > this.currentIndex = 0; > $('.menu_button').click(this.onClick); > }; > > MenuBar.prototype.onClick = function(evt) > { > this.currentIndex = 1; //<--Unable to access > class variable!! > this.Select(this.currentIndex); //<--Unable to > access class funtion!! > }; > > MenuBar.prototype.Select = function(index) > { > //code goes here > }; > </script> > // > ************************************************************** > **************************************** > > Once the onClick event is received the scope move from the > class to the actual item itself. How do I access class > variables amd functions after receiving an event?? > > Any help is greatly appreciated. > > -Ted >