How to bind this to to a jQuery's event?

Question

How can I bind this to a jQuery's event?

For instance, for the push menu below, I have to 'remember' this to var root:

class PushMenu {
    constructor() {
        this.slideShown = false;
        var root = this;
        $('.navmenu').on('shown.bs.offcanvas', function() {
            root.slideShown = true;
        });
    }
}

But I wonder if I can bind this so I can save having var root:

class PushMenu {
    constructor() {
        this.slideShown = false;
        $('.navmenu').on('shown.bs.offcanvas', function() {
            this.slideShown = true;
        });
    }
}

Is this possible?

Try assigning this to a global variable and binding that variable instead. I am not sure if it will work. — Abhijit Borade, Oct 09 '16 at 09:29

score 3 · Accepted Answer · answered Oct 09 '16 at 09:33

3

You are using es6 class so i assume es6 syntax are alright with arrow function

$('.navmenu').on('shown.bs.offcanvas', () => {
    this.slideShown = true;
});

answered Oct 09 '16 at 09:33

Endless

34,080
13
108
131

thanks for this answer. this is what I am after - ES6! thank you!! :-) – Run Oct 09 '16 at 09:40

score 2 · Answer 2 · edited May 23 '17 at 10:34

Use jQuery.proxy()

Takes a function and returns a new one that will always have a particular context.

class PushMenu {
    constructor() {
        this.slideShown = false;
        $('.navmenu').on('shown.bs.offcanvas', jQuery.proxy(function() {
            this.slideShown = true;
        }, this));
    }
}

We could have used jQuery.proxy here so the reference to this refers to the object of PushMenu instead of the element that triggered the event.

Documentation

How to bind this to to a jQuery's event?

2 Answers2