jquery - 如何从按钮单击功能访问其他小部件属性？

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() 函数中的按钮对象无法直接访问小部件创建者这一事实。有很多方法可以解决这个问题。我建议你用 this._on 而不是 pButton.click 绑定点击回调，例如替换：

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

和：

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

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

你可以在这里测试它：http: //jsbin.com/yorunaji/1/edit ?html,js,output