从Click回调函数

时间:2016-08-20 11:45:45

标签: javascript jquery jquery-ui

我的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)?

2 个答案:

答案 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;

在您的窗口小部件类的第一行定义它。