Question

I’m creating a little JQuery UI widget in which I bind an handler to an element:

this.element.bind("keyup", { list: this.container }, this._filter);

The widget has options:

options:
{
    dataUrl: '',
    isEnabled: true
},
_filter: function (event)
{
    var input = $(this);
    var that = this;
    alert(that.options.isEnabled);
    if (that.options.enabled) {
        that.container.show();
        event.data.list.find("li").each(function () {
            if ($(this).text().toLowerCase().indexOf(input.val().toLowerCase()) < 0) {
                $(this).hide();
            }
            else {
                $(this).show();
            }
         });
     }
 },

But when I do an alert of one option in _filter, I get an error: “that.options is undefined”
Same for any other element I try to access/use, like if the function was only able to get either what’s defined inside or from the eventData being passed.

Am I missing something?
Thanks

Answer 1

The problem is that the scope/context/this of the listener function (_filter) is the jQuery Object it was bound too. In you case this in the _filter function would actually refer to this.element of the widget when called as the event listener. What you can do is the following:

this.element.bind("keyup", { list: this.container }, $.proxy(this, "_filter"));

What the proxy method does, is basically wrap a function that will be applied in a specific context (see documentation). The nice thing about proxy is, that you can unbind using the original function like this:

this.element.unbind("keyup", this._filter);

Hope this helps.