如何从按钮点击功能访问其他小部件属性

Question

我有一个简单的小部件，带有一个按钮和一些属性和函数。如何在单击按钮时访问这些功能。

(function ($, undefined) {
$.widget("test", {
    _create: function () {
        var pButton = this.element;
        pButton.button();
        pButton.css({ width: this.options.buttonWidth });
        pButton.click(function () { this.function_test(); });

    },
    function_test: function ()
    {
        alert("aa");
    }
});
}(jQuery));

Answer 1

问题来自于click（）函数中的按钮对象无法直接访问小部件创建者。有很多方法可以解决这个问题。我建议您将点击回调与此绑定_on而不是pButton.click，例如replace:

pButton.click(function () { this.function_test(); });

带有：

this._on(pButton, {
    click: function () { this.function_test(); }
});

现在click回调中的this对象是小部件实例，而不是按钮，因此您可以调用小部件的函数。

您可以在此处进行测试：http://jsbin.com/yorunaji/1/edit?html，js，输出