How to access other widget properties from button click function?

Question

I have simple widget with one button and some properties and functions. How can I access those functions on button click.

(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

The problem comes from the fact that the button object from the click() function doesn't have direct access to the widget creator. There are many ways to address that. I suggest you bind the click callback with this._on instead of pButton.click, e.g. replace:

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

with:

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

Now the this object inside the click callback is the widget instance, not the button, thus you can call functions of the widget.

You can test it here: http://jsbin.com/yorunaji/1/edit?html,js,output