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

问题描述:

我的JQuery-UI小部件在单击时应该附加一个div给自己。但我的按钮回调没有访问this.element - 它没有定义,因为我认为this是指按钮,而不是我的小部件。请参阅简单的代码下面更好的描述:从内部访问JQuery UI小部件点击回调函数

(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)?

它不起作用的原因是因为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); 

你应该申报的这另一个目的是回调中使用它:

var _this = this; 

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

+0

你能详细点到底在哪?它应该高于'_create:...',因为这会给编译器带来错误(因为它在地图/对象中)。究竟在哪里? –