Function undefined in jquery / javascript

Question

zoom: function ( element, scale ){.....},
init: function() {
 $("#book div img").live('dblclick', function() {
 ...
 $( "#slider" ).slider({
 ...
 slide: function( event, ui ) {
 //call function here
 zoom (element,ui.value);
 }
 });
 });
},

There are two function, zoom and the main function. The main function call zoom function to perform work, how ever, since it is not at the same level, the browser return the error of undefined function 'zoom' . How to fix this (Able to call zoom inside the slide:function)?

• jbabey: have you tried saving this in a var and calling this.zoom?
• user782104: sorry what does it mean of saving this in a var?
• Brad Christie: this adding: var self = this; after init: function(){ then use self.zoom(). Looks like a scope issue from here.

Answer 1

Store a reference to the this object in the outermost scope of your functions. Then call this.zoom() inside your callback:

zoom: function ( element, scale ){.....},
init: function() {
 // store a reference to the object these functions are being added to
 var that = this; 
 $("#book div img").live('dblclick', function() {
 ...
 $( "#slider" ).slider({
 ...
 slide: function( event, ui ) {
 // use the var you made above to call zoom
 that.zoom (element,ui.value);
 }
 });
 });
},

simplified example: http://jsfiddle.net/u5ZL3/

Answer 2

Shamelessly taken from: How do I declare a namespace in JavaScript?

//Public Method
skillet.fry = function() {
 var oliveOil;
 addItem( "\t\n Butter \n\t" );
 addItem( oliveOil );
 console.log( "Frying " + skillet.ingredient );
};
//Private Method
function addItem( item ) {
 if ( item !== undefined ) {
 console.log( "Adding " + $.trim(item) );
 }
} 

• jbabey: not entirely relevant since the poster is using an object literal pattern and it does not solve the issue in the post, but good information regardless...

Answer 3

If your class is called Bob, you can just call the function like this

Bob.zoom (element,ui.value);

The other solution would be to use "this" that has some advantages over calling the class name I believe but requires more code.