我的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
)?
答案 0 :(得分:2)
它不起作用的原因是因为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);
答案 1 :(得分:0)
你应该在回调中声明另一个对象:
var _this = this;
在您的窗口小部件类的第一行定义它。