controlling the value of this in a jquery event

controlling the value of this in a jquery event  using -'jquery,scope,this'

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?

asked Oct 7, 2015 by devkumargupta
0 votes

8 Answers

0 votes

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'
answered Oct 7, 2015 by deven.bendale
0 votes

jQuery has the jQuery.proxy method (available since 1.4).


var Foo = {
  name: "foo",

  test: function() {

$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted
answered Oct 7, 2015 by dhananjayksharma
0 votes

I like your way, in fact use a similar construction:

$('#available_input').bind('click', {self:this}, this.onClick);

and the first line of this.onClick:

var self =;

I like this way because then you get both the element clicked (as this) and the "this" object as self without having to use closures.

answered Oct 7, 2015 by jekbishnoi
0 votes

jQuery does not support binds and the preferred way is to use functions.

Because in Javascript, this.availableCategoryClick does not mean calling the availableCategoryClick function on this object, jQuery advise to use this preferred syntax:

var self = this;
jQuery('#available input', self.controlDiv).bind('click', function(event)

OO concepts in Javascript are hard to understand, functionnal programming is often easier and more readable.

answered Oct 7, 2015 by sameer rathore
0 votes

I don't think jQuery has a built-in feature for that. But you could use a helper construct like the following:

Function.prototype.createDelegate = function(scope) {
    var fn = this;
    return function() {
        // Forward to the original function using 'scope' as 'this'.
        return fn.apply(scope, arguments);

// Then:
$(...).bind(..., obj.method.createDelegate(obj));

This way, you can create dynamic 'wrapper functions' with createDelegate() that call the method with a given object as its 'this' scope.


function foo() {

var myfoo = foo.createDelegate("foobar");
myfoo(); // calls foo() with this = "foobar"
answered Oct 7, 2015 by santosh soni
0 votes

you can use the javascript bind method like this:

var coolFunction = function(){
  // here whatever involving this

var object = {coolValue: "bla"};

$("#bla").bind('click', coolFunction.bind(object));
answered Oct 7, 2015 by manju bhargava
0 votes

Seeing that functions changes scope, the most common way is to do it by hand, with something like var self = this.

var self = this

  // refer to 'self' here
answered Oct 7, 2015 by akhilesh
0 votes

HTML 5-compliant browsers provide a bind method on Function.prototype which is, probably the cleanest syntax and is not framework-dependent, though it is not built into IE until IE 9. (There is a polyfill for browsers without it, though.)

Based on your example, you can use it like this:

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

Or to use slightly more concise and up-to-date jQuery (and eliminate confusion from two different kinds of binds):

$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));
answered Oct 7, 2015 by rajesh