クリックコールバック関数内から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内のスコープはウィジェットではありません。

この問題を解決する方法は2つあります。

オプション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.addRow関数オブジェクトにthis範囲を結合することによって：

(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; 

はあなたのウィジェットクラスの最初の行でこれを定めます。