从内部访问JQuery UI小部件点击回调函数

Question

我的JQuery-UI小部件在单击时应该附加一个div给自己。但我的按钮回调没有访问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; 

在第一线的你Widget类定义此。