Exception Handling in jQuery Event Handlers

Today I had a problem with my upcoming Time & Bill mobile client: I want to throw an exception from an event handler. For example:

// Inside a constructor
$('.x').live("click", this.stuff);

My elements marked with the css class “x” will execute the stuff method. As mentioned in the comment, stuff is a method of my object and thus “this” is necessary. With that code you can run into problems: if you refer to “this” inside the stuff method, it will run in the function context and not the object context. Most likely you run into trouble. The usual solution is to use a proxy:

$('.x').live("click", $.proxy(this.stuff, this));

Now we can execute the stuff method with the “this” context, which is in the object our constructor created. Basically jQuerys $.proxy is nothing else than a “bind” implementation. It uses JavaScripts “apply” to execute “stuff”.

So far so good. Unfortunately you can’t throw a new Exception/Error inside stuff and catch it properly. What to do? It would be elegant if jQuery would offer us something here. But that’s not the case. The only way I found was to write my own “bind” mechanism. Bind usually executes a function in the correct context. In my case I additionally want to react to exception handling.

It looks like:

APP.proxyMethod = function (fn, context) {
    return function () {
        try {
            fn.apply(context, arguments);
        } catch (error) {
            APP.errorHandler(error);
        }
    };
};

The first argument is the function to execute, the second one the desired context. Basically this is a pretty simple bind function, just returning a new function which applies my function to the context with arguments. The only exception is my surrounding try/catch block which catches potential errors and calls an errorHandler.

You can use it like the jQuery proxy:

$('.x').live("click", APP.proxyMethod(this.stuff, this));

That’s it. Thanks that I have learned about apply/bind/call recently I could easily implement this feature. For me it means another step to reduce my jQuery dependency on my mobile.