jQuery plugin - multiple instantiation

Question

I'm asking for help. I have almost clean jquery boilerplate with my code here:

http://jsfiddle.net/XXw5h/7/

;(function ( $, window, document, undefined ) {


    var pluginName = "defaultPluginName",
        defaults = {
            propertyName: "value"
        };

      function Plugin( element, options ) {
        this.element = element;


        this.options = $.extend( {}, defaults, options );

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype = {

        someVal: Math.round(Math.random() * 99999999),

        init: function() {
            self = this;

            aEl = $('<a/>', {  
                href: '#',
                text: this.options.propertyName,
                click: function(e){self._clicked();}
            });

            $(".el1").before(aEl);    
            $(".el1").before("<br/>");    

        },

        _clicked: function(el, options) {
            alert("Random value of el instance:" + this.someVal);
            alert("Property name:" + this.options.propertyName);
        }
    };


    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
            }
        });
    };

})( jQuery, window, document );

$('.el1').defaultPluginName({
  propertyName: 'el1 link '
});

$('.el2').defaultPluginName({
  propertyName: 'el2 link'
});

My problem is that I need multiple instantiation and it's where my troubles begin. I know my question was answered here:

jQuery plugin multiple instantiation

but I just can't make it work.

When you click at el1 link at linked jsfiddle, I need to show one random number and property of first instance of plugin. When you click at el2 link at linked jsfiddle, I need to show second random number and property of second instance of plugin. Currently it's same for both links.

My question is how to create own options for every instance of my plugin? And then, what is the right way to create my own per instance variables? Thanks!

Answer 1

Bergi's answer is true, you should define self as local variable. In addition, I would like to add that you should make someVal a function to have random number every time you click on the link, otherwise they will be the same number at init time. So the updated code should be:

Plugin.prototype = {

    someVal: function () { 
        return Math.round(Math.random() * 99999999) 
    },

    init: function() {
        var self = this;

        aEl = $('<a/>', {  
            href: '#',
            text: self.options.propertyName,
            click: function (e) {
                e.preventDefault();
                self._clicked();
            }
        });

        $(".el1").before(aEl);    
        $(".el1").before("<br/><br/>");    

    },

    _clicked: function(el, options) {
        alert("Random value of el instance:" + this.someVal());
        alert("Property name:" + this.options.propertyName);
    }
};

Fiddle: http://jsfiddle.net/hieuh25/XXw5h/8/

Answer 2

self = this;
aEl = $('<a/>', {  
    href: '#',
    text: this.options.propertyName,
    click: function(e){self._clicked();}
});

You're assigning to a global variable self here, which will get overwritten by the second plugin instantiation and only refer to that.

Add the var keyword to make it a local variable.