JQuery $ (это) внутри функции плагина

Question

У меня есть этот плагин jQuery:

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

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

  return this;
}

и я называю его так:

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

Моя проблема в том, что $(this) в $(this).hide() не относится к $('.the-element'), а точнее DOMWindow.Есть ли способ, которым я могу сделать эту работу?

Answer 1

Измените func(); на func.call(this); или $.proxy(func, this)();.

Вы также можете использовать apply() (необязательно, когда подходит call()) или bind() (ограниченная поддержка браузера, $.proxy()делает по существу то же самое).

Answer 2

@ Алекс правильно, все, что вам нужно, это заменить func(); на func.call(this);, и это будет работать.Однако я хотел бы отметить, что вы делаете 2 избыточных вызова конструктора jQuery в вашем плагине:

    $.fn.touchBind = function(func) {

    //this already refers to a jQuery object
      this.live('touchmove', function() {

        //this refers to a DOM element inside here
        $(this).addClass('dragged');
      });

      //this already refers to a jQuery object
      this.live('touchend', function() {

         //this refers to a DOM element inside here
        if ($(this).hasClass('dragged') == false) {
          func.call( this );
        }
      });

      return this;
    }

Вы можете проверить это следующим образом:

$.fn.whatIsThis = function(){
return "jquery" in this ? "jQuery object" : "Something else";
};

И затем:

console.log( $("div").whatIsThis() );
//"jQuery object"

Answer 3

Как насчет:

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