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
– Abhijit Borade, Commented Oct 9, 2016 at 9:29

Endless · Accepted Answer · 2016-10-09 09:33:55Z

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 9, 2016 at 9:33

Endless

38.8k14 gold badges118 silver badges138 bronze badges

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

1 Comment

Run Over a year ago

thanks for this answer. this is what I am after - ES6! thank you!! :-)

Community · Accepted Answer · 2017-05-23 10:34:14Z

2

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

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Oct 9, 2016 at 9:30

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related