How do I get "this" into this function... jquery slider [duplicate]

Question

I've got something like the following:

MyShape = function() {

    var _container = {
        width: 100,
        height: 100
    }


    this.draw() { 
       //do stuff...
    }

    $('#slider-1').bind('change', function(event, ui) {

        _container.width = $('#slider-1').val();
        this.draw();

    });


};

I'm using the jquery slider to dynamically change the width of my shape, then I call .draw() to redraw the shape. I keep getting this error though:

Uncaught TypeError: Object # has no method 'draw'

I'm fairly sure it's because I need to pass the context "this" into the change function, but I can't seem to figure out how to do that.

Community · Accepted Answer · 2017-05-23 10:33:23Z

8

This is caused because JavaScript's this is dynamic.

You can use Function.prototype.bind like so:

$('#slider-1').on('change', function(event, ui) {

    _container.width = $('slider-1').val();
    this.draw();

}.bind(this) /* use the same this value */);

Or you can use a closure variable

var that = this;
$('#slider-1').on('change', function(event, ui) {

    _container.width = $('slider-1').val();
    that.draw();

});

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Jan 13, 2014 at 17:50

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

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

5 Comments

crush Over a year ago

Also $.proxy, though, bind is cleaner in this example, I think.

webketje Over a year ago

@Benjamin - nice timely edit; I was going to point out that you needed to use .on :)

cookie monster Over a year ago

@Tyblitz: .on() may be preferred, but it's not needed.

cookie monster Over a year ago

@user602525: Be aware that the Function.prototype.bind() used in the first example isn't available in IE8 and lower, as well as some other older browsers.

Benjamin Gruenbaum Over a year ago

.bind just aliases on. This is its full source code function(types, data, fn) { return this.on(types, null, data, fn);} . It's better to use .on since it's the newer interface.

Collectives™ on Stack Overflow

How do I get "this" into this function... jquery slider [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related