Question

I’m trying to set up a parent class that extends a subclass, but whenever I attempt to reference this.element in the subclass when called from the superclass, it’s undefined. What am I doing wrong here?

$.widget("ui.testSuper", $.extend({}, $.ui.testSub.prototype, 
{
    _init: function ()
    {
        $.ui.testSub.prototype._init();
    },
...
}));

$.widget("ui.testSub", $.ui.mouse,
{
    _init: function ()
    {
        this.element.addClass("some-class");
    },
...
});

$('#some-element').testSub({ }); // this works fine

$('#some-element').testSuper({ }); // this.element is undefined

Answer 1

When you extend $.ui.testSub it doesn’t exists at those point. All you need to do is to swap those two blocks of code:

//Should be first
$.widget("ui.testSub", $.ui.mouse,
{
    _init: function ()
    {
        this.element.addClass("some-class");
    },
...
});

$.widget("ui.testSuper", $.extend({}, $.ui.testSub.prototype, 
{
    _init: function ()
    {
        $.ui.testSub.prototype._init();
    },
...
}));

$('#some-element').testSub({ }); // this works fine

$('#some-element').testSuper({ }); // then it will work fine as well

See live example here

UPDATE

I got what you’re saying. You need to call base method like this

$.ui.testSub.prototype._init.call(this);

So you will not loose the context of your element. Example is here