Question

I’m trying to extend upon an existing jQuery plugin and I’ve run into some problem, that has been discussed before, unfortunately not perfectly related to my case. Basically, my code does something like this

(function($) {
    var self = $.ech.multiselect.prototype,
        orig_create = self._create,
        orig_init = self._init;
    var extensionMethods = {
        elemental: null,
        tooltip: function(e){
            var id = self.elemental.attr("id");
            //code
        },
        _create: function() {
            var ret = orig_create.apply(this, arguments);
            //code
            return ret;
        },
        _init: function() {
            var ret = orig_init.apply(this, arguments);
            this.elemental = this.element;
            return ret;
        },
        _bindEvents: function() {
            self.tooltip(e);
        }
    };

    $.extend(true, self.options, {tooltip: true});
    $.extend(true, self, extensionMethods);

})(jQuery);

My problem is I’m trying to store a reference to this.element inside the “elemental” object, so that I can use it to get the id of the control inside tooltip(). It doesn’t work, however and I’ve almost given up.

Answer 1

You’re using self, which is the prototype object itself. You want this, which refers to the instance and has the correct property:

tooltip: function(e){
    var id = this.elemental.attr("id");
},

and:

_bindEvents: function() {
    this.tooltip(e);
}

The elemental in the prototype should never be set, because the elements differ per instance.