Calling JavaScript class' function from jQuery

Question

I am having a JavaScript class like

MyClass = function() { }
MyClass.prototype.init = function(param){ }
MyClass.prototype.reset = function() { }

if I call these function from HTML page using onClick="reset()" It works nice. But If I call these functions from jQuery it is not working. Please suggest to me. A sample call from jQuery:

$(document).ready(
    function()
    {
        app = new MyClass();
        app.init(someid, url,
            "event_handling": {
                "event1":app.reset
            });
    })

along with the above, is it possible to add CSS rules like:

"css_class_names": {
                        style-1: "firstStyle",
                        style-2: "secondStyle"
                    }

If possible, then how can I apply style to the particular element which has the ID Thanks in advance!

try "app.reset()" instead of "app.reset", its a function not a property — Merec
– Merec, Commented Feb 28, 2013 at 9:20
You have a syntax error in the example (missing {) in the app.init call. — Shurdoof
– Shurdoof, Commented Feb 28, 2013 at 9:21
@T.J.Crowder He is missing an opening brace in app.init before "event_handling". Edit: looks like a closing one too. — Shurdoof
– Shurdoof, Commented Feb 28, 2013 at 9:34

yourdeveloperfriend · Accepted Answer · 2013-02-28 09:21:00Z

1

Your issue is that when the app calls event1, it's going to call app.reset from a different context than what you had intended. In other words, in your app.reset, the "this" variable won't be what you intend it to be. The reason is that when you declare event1: app.reset it sets event1 to the function app.reset.

workaround:

"event1": function() { app.reset(); }

answered Feb 28, 2013 at 9:21

yourdeveloperfriend

1,5901 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2013-02-28 09:29:00Z

~~You haven't really shown your call from jQuery, but I'm going to guess something like:~~ Actually, you have, but the problem isn't with the jQuery call. See notes under the break below.

Assuming:

$("some selector").click(app.reset);

...where you're passing one of app's methods as an event handler.

The reason it's not working is that within the call to the method, this won't refer to the app instance, it'll refer to the DOM element. In JavaScript (for now), this is defined entirely by how a function is called, not where it's defined.

You can give the function the correct this value during the call by using jQuery's $.proxy function:

$("some selector").click($.proxy(app.reset, app));

Alternately, ECMAScript5 defines Function#bind for this:

$("some selector").click(app.reset.bind(app));

...but that requires that you're running on an engine that implements it, or that you have an ES5 shim in place.

OR you can use a closure if you happen to have one handy:

$("some selector").click(function() {
    app.reset();
});

There we're using the fact that you have the app variable lying around, by creating a closure over it (the function we pass as the event handler).

More (on my blog):

In your code:

$(document).ready(
    function()
    {
        app = new MyClass();
        app.init(someid, url,
            "event_handling": {
                "event1":app.reset
            });
    })

The above discussion applies to

"event1":app.reset

If at some point later you call event1(), this won't be app.

You can apply the fixes above, like this:

jQuery.proxy:

"event1":$.proxy(app.reset, app)

Function#bind:

"event1":app.reset.bind(app)

Closure:

"event1":function() { app.reset(); }

Collectives™ on Stack Overflow

Calling JavaScript class' function from jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related