Access JQuery UI Widget from within Click callback function

Question

My JQuery-UI widget should append a div to itself when clicked. But my button callback doesn't have access to this.element - it's undefined because I assume this refers to the button and not my widget. Please see the simple code below for a better description:

(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);

How can I access the widget (this.element) inside my click callback function?

Pieter · Accepted Answer · 2016-08-20 12:10:05Z

The reason it does not work is because the this.element.click listener callback is called from within a different scope. Therefore the scope from within the addRow is not the widget.

There are two ways of solving this problem.

Option 1: By storing this in a variable, so you can access it from within another scope. For example:

(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);

Option 2: By binding the this scope to the this.addRow function object:

(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);

mdameer · Accepted Answer · 2016-08-20 11:49:56Z

0

You should declare another object of this to use it within callbacks:

var _this = this;

define this at first line of you widget class.

answered Aug 20, 2016 at 11:49

mdameer

1,5402 gold badges14 silver badges17 bronze badges

1 Comment

sazr Over a year ago

can you elaborate where exactly? Should it be above _create: ... because that gives a compiler error (because its in a map/object). Where exactly?

Collectives™ on Stack Overflow

Access JQuery UI Widget from within Click callback function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related