Search jQuery

jQuery Forum

Adding prototype function as an event handler

in Getting Started • 12 years ago

Hey guys,

I need to know how to add an event to a button. The specific issue is that I want to add an event which is a prototype function of a class. Consider the following as an example:

MyTestClass = function() {
    this.firstName = "Pete";
    this.lastName = "Johnson";

    MyTestClass.prototype.getFirstName = function() {
        return this.firstName;
    };

    MyTestClass.prototype.getLastName = function() {
        return this.lastName;
    };

    MyTestClass.prototype.showFullName = function() {
        alert(this.getFirstName() + ' ' + this.getLastName());
    };

    MyTestClass.prototype.initialise = function() {
        $('#test-btn').click(this.showFullName);
    };
}

var testClass = new MyTestClass();

function onFormLoad() {
    testClass.initialise();
}

Look at the line: $('#test-btn').click(this.showFullName);

When the button is clicked, the event will actually get triggered, but there is a scope problem because the showFullName() function will produce the following error:

"this.getFirstName is not a function" on this line: alert(this.getFirstName() + ' ' + this.getLastName());

Is there any way to get around this problem or am I forced to use inline functions as event handlers?

Replies(2)

donatello..

Re: Adding prototype function as an event handler

12 years ago

BTW, this also doesn't work and produces the same error:

    MyTestClass.prototype.initialise = function() {
        $('#test-btn').click(
            function(){
                alert(this.getFirstName() + ' ' + this.getLastName());
           }
        );
    };

The getFirstName() and getLastName() functions are prototype functions. I guess maybe it is not possible to do the above?

donatello..

Re: Adding prototype function as an event handler

12 years ago

Sorry that I keep posting on my own thread. I have now also tried using the .bind() function but in this case it also didn't work.

$('#test-btn').bind('click', this, this.showFullName);

Then I thankfully came upon the Hitch plugin as per this link: http://think-robot.com/2009/06/hitch-object-oriented-event-handlers-with-jquery/.

The Hitch plugin looks like this:

(function($) {
$.fn.hitch = function(ev, fn, scope) {
return this.bind(ev, function() {
return fn.apply(scope || this, Array.prototype.slice.call(arguments));
});
};
})(jQuery);

Now, I can add both prototyped and standard class functions to the event handlers and it works!

$('#test-btn').hitch('click', this.showFullName, this);

I wish this issue was better documented though as it took me around 8 hours to resolve. My original code is much more complex and I thought that the problem was in my own code.

Top Reply

Response title

Attachments

jQuery Forum

Adding prototype function as an event handler

Replies(2)

Re: Adding prototype function as an event handler

Re: Adding prototype function as an event handler

Statistics

Tags

Actions