CODEWITHSUNDEEP
javascriptjqueryproxy
z-x
z-x

Reputation: 451

Change $(this) context in anonymous function

This is the function I use to bind 'tap' event on mobile devices. Basically a normal function.

bindTapEvent: function(container, selector, run, bindClickAlso){
    var startX, startY, currentX, currentY = 0;
    var moved = false;
    var self;

    if(touchDevice){
        container.on({
            click: function(e){
                e.preventDefault();
            },
            touchstart: function(e){
                e.preventDefault();
                self = $(this);
                startX = e.originalEvent.touches[0].pageX;
                startY = e.originalEvent.touches[0].pageY;
            },
            touchmove: function(e){
                currentX = e.originalEvent.touches[0].pageX;
                currentY = e.originalEvent.touches[0].pageY;
                if(Math.abs(startX - currentX) > 10 || Math.abs(startY - currentY) > 10){
                    moved = true;
                }
            },
            touchend: function(e){
                e.preventDefault();
                run();
            }
        }, 
        selector
        )
    } else {
        if(bindClickAlso != false){
            container.on('click', selector, function(){
                run();
            });
        }
    }
}

I make use of it like this:

tt.bindTapEvent(container, '.showColumns', function(){
    container.find('.column').addClass('visible');
    $(this).doSomething();
});

The only problem is that I cannot (obviously) user $(this) inside somtething like this. I've read about jQuery $.proxy that changes the context, but I cannot get to understand it so I can use it. Is it possible (in my case) to change the context of the anonymous function used in tt.bindTapEvent to that when I use $(this) it is 'stored' and 'used' only in the bindTapEvent function?

Upvotes: 4

Views: 6161

Answers (3)

Adam Rackis
Adam Rackis

Reputation: 83356

There's a bind function defined by the ES5 standard, and supported by all modern browsers (and shimmable for IE8 and below)

You call bind right on the function of your choice, and a new function will be returned.

The first parameter passed to bind is the object you'd like to be set to this inside of the resulting function, and subsequent arguments will be curried. So for your situation, just adding .bind(this) to the anonymous function should work.

tt.bindTapEvent(container, '.showColumns', function(){
    container.find('.column').addClass('visible');
    $(this).doSomething(); //should work now
}.bind(this));

More info on MDN

Upvotes: 2

Bergi
Bergi

Reputation: 664579

If you know about the this issue, I'd expected you to know about the .call and .apply methods, too :-)

You would need to call the run-function in context of the container, respectively of this in the listener functions:

e.preventDefault();
run.call(this, e);

BTW: You seem to declare and initialisize the var self, but use it nowhere?

Upvotes: 0

Andy
Andy

Reputation: 30135

Take a look at .call() and .apply() which let you pass the desired context as the first parameter.

http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx

so in your example instead of run() you could use run.call(this); so you're passing this as the context for the callback function.

Upvotes: 3

Related Questions