Question

I’ve built a really simple jquery ui widget that just creates a slider and tries to bubble up the slide event. The code is below. However, this._trigger is undefined in this context. How would I re-trigger the event in this case?

(function($) {
    $.widget("ui.timelineSlider", {
        options : {
        },

        _create : function() {
            var self = this;
            var element = self.element;
            var options = self.options;

            element.slider({
            slide:function (e, ui) {
                        this._trigger("slideHappened", null, {date: ui.value});
                }
            });
        },

        destroy : function() {
            this.element.next().remove();
        },

        _setOption : function(option, value) {
        }
    });
})(jQuery);

Answer 1

jQuery will set the invocation context (i.e. this) on events bound through it to the DOM node that the event occurred on. In this case it will be the div.ui-slider that the slide occurred on.

To reference the widget from the slide handler a reference will have to be saved off that the slide method can access. Luckily you already have one with var self = this; in _create.

Therefore you can simply replace this with self and you’re good.

Live Example – http://jsfiddle.net/kQYWf/