Call object function inside object in javascript

Question

I'm trying to create a javascript class and instantiate some objects of it from HTML on load. The class contains some functions and some event listeners.

function Rating (id) 
{
 this.id = id;
 $(id).click(function() 
 {
 alert('click '+ this.id);
 this.debug();
 });
 this.debug = function() 
 {
 alert(' debug');
 }
 }

My goal is to call a class function from an event listener (in this case debug inside click listener). Unfortunately, when I click on the object I only see the event-listener alert and not debug alert (fiddle).

I know it's a basic question. But all answers I've found explain to create classes as variables, not as functions. I've adopted this way because my goal is to create multiple instances of the class into the same page. Is there a way to instantiate multiple objects using "variable classes" and call internal functions from objects? Thanks in advance.

Answer 1

Classical one, the context in the event handler is window.

The simplest solution is to declare a variable in the enclosing scope to store the value you need :

function Rating (id) 
{
 var r = this;
 this.id = id;
 $(id).click(function() {
 alert('click '+ r.id);
 r.debug();
 });
 this.debug = function() 
 {
 alert(' debug');
 }
 }

• Denys Séguret: If someone finds a good QA to close this Q as duplicate and it gets closed, I'll delete this answer.
• Giorgio: Thanks @dystroy. I would have preferred to avoid asking, but as said I wasn't able to find answers with "function classes", only variables.
• Denys Séguret: @Giorgio I wasn't insulting you, this is one of those things that are hard to search or figure at first.