Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I am using following code but it returns following error

 Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'userInput'

Here is the code jsfiddle

var ClickEvent = function (event) {
    this.ev = $('.' + event);
    this.ev.on('click', function () { this.userInput(); });
};

ClickEvent.prototype = function () {
    return {
        userInput: function () {
            console.log('user');
        },

        show: function () {
            console.log('show');
        }
    };   
}();

var c = new ClickEvent('event');

I am calling userInput function inside on() callback function but it returns above error.

How can I solve this problem?

share|improve this question
put a console.log(this) inside the click event handler function (where you now have userInput). What does it tell you ? :) – Benjamin Gruenbaum yesterday
Is the $ jQuery? If it is, add the tag. – epascarello yesterday

3 Answers

up vote 5 down vote accepted

The problem is the execution context(this) inside the click callback handler does not point to the ClickEvent instance, it is referencing the dom element that was clicked.

You need to use

this.ev.on('click', $.proxy(function () { this.userInput(); }, this));

Demo: Fiddle

or

var that = this;
this.ev.on('click', function () { that.userInput(); });

Demo: Fiddle

share|improve this answer
up vote 2 down vote

this.userInput() is nested within the callback function, and thus is scoped within it. You could externalize the this instance you need as follow:

var ClickEvent = function (event) {
    var $this = this;
    $this.ev = $('.' + event);
    $this.ev.on('click', function () { $this.userInput(); });
};
share|improve this answer
What is the meaning of $this? I mean is this var that = this; different than var $that = this; ? – x4ph4r yesterday
@x4ph4r No, there's no difference, $this is just the name of a variable, just like that. – sp00m yesterday
up vote 0 down vote

the "this" inside your onclick function is referencing "this.ev" which is 

"$('.' + event);"

not your object with "userInput" and "show".

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.