Controlling the value of 'this' in a jQuery event

jquery scope this
Pat Long - Munkii Yebee picture Pat Long - Munkii Yebee · Feb 6, 2009 · Viewed 68.9k times · Source

I have created a 'control' using jQuery and used jQuery.extend to assist in making it as OO as possible.

During the initialisation of my control I wire up various click events like so

jQuery('#available input', 
            this.controlDiv).bind('click', this, this.availableCategoryClick);

Notice that I am pasing 'this' as the data argument in the bind method. I do this so that I can get at data attached to the control instance rather from the element that fires the click event.

This works perfectly, however i suspect there is a better way

Having used Prototype in the past, I remember a bind syntax that allowed you to control what the value of 'this' was in the event.

What is the jQuery way?

Answer

Torbjörn Nomell picture Torbjörn Nomell · Apr 20, 2011

You can use jQuery.proxy() with anonymous function, just a little awkward that 'context' is the second parameter.

 $("#button").click($.proxy(function () {
     //use original 'this'
 },this));

Related questions

How do I pass the this context to a function?

I thought this would be something I could easily google, but maybe I'm not asking the right question... How do I set whatever "this" refers to in a given javascript function? for example, like with most of jQuery's functions such …

Read More
var self = this?

Using instance methods as callbacks for event handlers changes the scope of this from "My instance" to "Whatever just called the callback". So my code looks like this function MyObject() { this.doSomething = function() { ... } var self = this $('#foobar').bind('click', …

Read More
Global javascript variable inside document.ready

Which is the right way of declaring a global javascript variable? The way I'm trying it, doesn't work $(document).ready(function() { var intro; if ($('.intro_check').is(':checked')) { intro = true; $('.intro').wrap('<div class="disabled"&…

Read More