Question

Hello Stackoverflow users,

I have a question regarding an JQ UI widget im trying to make.
I have a _create command with the following:

    this.findinput =    this.element.children('input:text')
                            .addClass('ui-search-input ui-widget ui-state-default ui-background-none ui-corner-left')
                            .wrap('<div class="ui-position-wrapper" />')
                            .bind('focusin focusout',this._checkval)
                            .bind('keyup',this.inputchanged);

As you can see i bind some function to the input field, so i can manipulate the text and layout.
But my problem is that the function is for some reason overwriting the globa object ‘this’ and its variables.
How can i keep them inside the functions?
(The reason i use functions is so i can acces them from outside the widget)

inputchanged: function(e) {
    $target = $(e.target);
    if (($target.val()).length != 0) {
        this.element.children('.ui-search-reset').children().addClass('ui-icon').removeClass('ui-helper-hidden');
    } else {
        this.element.children('.ui-search-reset').children().addClass('ui-helper-hidden').removeClass('ui-icon');
    }
},

returns: this.element is undefined and i cant acces this.options either?

Also if i bind a function to a “tr” in a table, and press the “td” it sets the “td” as the target object instead of the “tr”, which where the one binded – why is this? 🙂

Im quite new to jQuery so this might be stupid questions, or i might be doing it wrong – please let me know if that is the case!

Answer 1

An easy way to make sure you get the right this is to do it explicitly:

var self = this;
this.findinput = this.element.children('input:text')
                     //...
                     .bind('focusin focusout', function(e) { self._checkval(e) })
                     .bind('keyup', function(e) { self.inputchanged(e) });