jQuery $(this) inside a plugin function

Question

I have this jQuery plugin:

$.fn.touchBind = function(func) {
  $(this).live('touchmove', function() {
    $(this).addClass('dragged');
  });

  $(this).live('touchend', function() {
    if ($(this).hasClass('dragged') == false) {
      func();
    }
  });

  return this;
}

and call it like so:

$('.the-element').touchBind(function() {
  $(this).hide();
});

My problem is that $(this) in $(this).hide() doesn't refer to $('.the-element'), but rather DOMWindow. Is there a way I can make this work?

Answer 1

Change func(); to func.call(this); or $.proxy(func, this)();.

You could also use apply() (not necessary when call() suits) or bind() (limited browser support, $.proxy() does essentially the same thing).