Доступ к JQuery UI Widget изнутри Функция обратного вызова Click

Question

Мой JQuery-пользовательский виджет должен добавлять к себе div при нажатии. Но мой callback-код не имеет доступа к this.element - он не определен, потому что я предполагаю, что this относится к кнопке, а не к моему виджету. Пожалуйста, обратитесь к простому коду ниже для лучшего описания:

(function ($) { 

    $.widget("my.myWidget", { 

     _create: function() { 

      this.element.click(this.addRow); 
     }, 

     addRow: function(evt) { 

      // this.element is undefined? 
      console.log("Is this.element defined: " + this.element != undefined); 

      // cant append to this.element 
      $('<div></div>') 
       .appendTo(this.element); 
     } 
    }); 
})(jQuery); 

Как я могу получить доступ к виджету (this.element) внутри моей мыши функции обратного вызова?

Answer 1

Причина, по которой она не работает, вызвана тем, что обратный вызов прослушивателя this.element.click вызывается из другой области. Поэтому область действия внутри addRow не является виджетами.

Существует два способа решения этой проблемы.

Вариант 1: путем хранения this в переменной, чтобы вы могли получить к нему доступ из другой области. Например:

(function ($) { 
    $.widget("my.myWidget", { 

     _create: function() { 
      var self = this; 
      this.element.click(function() { 
       self.addRow(); 
      }); 
     }, 

     addRow: function(evt) { 

      // this.element is undefined? 
      console.log("Is this.element defined: " + this.element != undefined); 

      // cant append to this.element 
      $('<div></div>') 
        .appendTo(this.element); 
     } 
    }); 
})(jQuery); 

Вариант 2: по связыванию this простор this.addRow функции объекта:

(function ($) { 

    $.widget("my.myWidget", { 

     _create: function() { 
      this.element.click(this.addRow.bind(this)); 
     }, 

     addRow: function(evt) { 

      // this.element is undefined? 
      console.log("Is this.element defined: " + this.element != undefined); 

      // cant append to this.element 
      $('<div></div>') 
        .appendTo(this.element); 
     } 
    }); 
})(jQuery); 

Answer 2

Вы должны объявить еще один объект этого использовать его в функции обратного вызова:

var _this = this; 

определить это в первой строке вы виджета класса.