How to allow user to create two instances of a jQuery plugin

I have created following plugin. When I try to initialize it twice it does not work. In the demo if you open your browser console the open link is not responding. Instead the menu links are calling the secondFunc function twice . I don't understand where I have done a mistake.

HTML

 <div class="home">
       <div class="open-door-c">
           <a href="#" class="open-door">open</a>
        </div>
        <div class="container"> 
            <div class="info" >
                <div class="nav">
                    <ul class="menu">
                        <li><a href="#" class="link">1</a></li>
                        <li><a href="#" class="link">2</a></li>
                        <li><a href="#" class="link">3</a></li>
                        <li><a href="#" class="link">4</a></li>
                        <li><a href="#" class="link">5</a></li>
                    </ul>
                </div>
                <div class="more-details-container">
                    <div>
                        <h1>title</h1>
                    </div>
                    <div class="sec">
                        1
                    </div>
                    <div class="sec">
                        2
                    </div>
                    <div class="sec">
                        3
                    </div>
                    <div class="sec">
                        4
                    </div>
                    <div class="sec">
                        5
                    </div>
                </div>
            </div>
        </div>
    </div>

Plugin

 (function ($, window, document, undefind) { 
   var MyPlugin = {    
    init : function (options, element) { 
        $.extend({}, $.fn.myPlugin.options, options);            
        $.fn.myPlugin.options.linkClass.on('click', this.secondFunc);
    },

    secondFunc : function () {
        alert(this);
    }

}; 

$.fn.myPlugin = function (options) {  
    return this.each(function (options) {
        var rezG = Object.create(MyPlugin);
        rezG.init(options, this);
    });        
};

$.fn.myPlugin.options = {
    linkClass: $('.link')       
};

})(jQuery, window, document);

$('.more-details-container').myPlugin({
            linkClass: $('.link')
        });
        $('.home').myPlugin({
            linkClass: $('.open-door')
        });

jsfiddle demo

Answers


There are two possible mistakes:

  • $.extend({}, $.fn.myPlugin.options, options); will just return a new object containing properties of both $.fn.myPlugin.options and options, but it won't update your $.fn.myPlugin.options object which you're using below:

    $.fn.myPlugin.options.linkClass.on('click', this.secondFunc);

To keep both the original objects and assign the extended object to your $.fn.myPlugin.options, try this instead:

$.fn.myPlugin.options = $.extend({}, $.fn.myPlugin.options, options); // read more on [jQuery extend](// http://api.jquery.com/jquery.extend/)
  • I think there is no need to use each iteration below:

$.fn.myPlugin = function(options) { return this.each(function(options) { var rezG = Object.create(MyPlugin); rezG.init(options, this); }); };

init() will be called right when you're instantiating a new plugin with element.myPlugin(...);, which will create a new plugin reference with the specified argument options.

Have a look at this updated jsfiddle and see if that's you're looking for.


Need Your Help

Storing Python objects in a Python list vs. a fixed-length Numpy array

python performance numpy python-3.x cpython

In doing some bioinformatics work, I've been pondering the ramifications of storing object instances in a Numpy array rather than a Python list, but in all the testing I've done the performance was...

USB3 Controller & Kinect 2

controller usb driver kinect fresco

I recently updated a PC to Windows 8.1 in order to make it compatible to Kinect v2. It's an ASUS N53S with the following specs: