從內部訪問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類定義此。