从内部访问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类定义此。
你能详细点到底在哪?它应该高于'_create:...',因为这会给编译器带来错误(因为它在地图/对象中)。究竟在哪里? –