Multiple instances of jQuery plugin on one page?

Question

I saw many different jQuery plugin templates and read many different articles for creating jQuery plugins, including the official one. Nevertheless, I still seem to have missed something, in principle!

I use a combination of code that I saw elsewhere and official jQuery guidelines .

As you can see from the code, I am doing everything inside return this.each(function() { }); . This includes my personal functions. I assumed that this means that for every .pluginName(); called .pluginName(); code will be executed and attached to this instance. For example, I add a randID at the end of each of the element identifiers, so that if multiple instances are created, the instance may refer to the correct element.

My problem is that when I have two instances on the same page, the functions of the second instance (e.g. displayAvailableItems() ) use the first instances of randID s.

I assume 2 things are wrong from the start: the functions are in the wrong place, and randID is a poor method of identifying elements. If I move displayAvailableItems() just above retun this.each(function() { }); , then the variable availableItem no longer available for it.

Here is a shortened version of my code: (pastebin) http://tny.cz/6d3d52a8

 $.pluginName = { id: 'PluginName' ,version: '1.0' ,defaults: { // default settings foo: 'bar' } }; (function($) { //Attach this new method to jQuery $.fn.extend({ pluginName: function(params) { //Merge default and user parameters var params = $.extend($.pluginName.defaults, params) ,otherGeneralVars = 'example' ; return this.each(function() { var $t = $(this); //Generate a random ID to attach to the elements, so we can have endless (up to 50k) quantities of the plugin on the page var randID = 1 + Math.floor(Math.random() * 50000); //Make sure the randID hasn't been previously used while ($.inArray(randID, usedRandIDs) > -1) { randID = 1 + Math.floor(Math.random() * 50000); } usedRandIDs.push(randID); randID = '_PluginName' + randID; /* RUN INITIALIZATION SETTINGS */ var availableItemsContainerID = 'availableItemsContainer' + randID ,tagSearchContainerID = 'tagSearchContainer' + randID ,tagSearchID = 'tagSearch' + randID ,availableItemsID = 'availableItems' + randID ,selectedItemsContainerID = 'selectedItemsContainer' + randID ,selectedItemsID = 'selectedItems' + randID ,selectedValuesID = 'selectedValuesInputName' + randID ; //Build element structure $t.append('<div id="' + availableItemsContainerID + '">' + '<div id="' + tagSearchContainerID + '">' + '<input id="' + tagSearchID + '" value="' + params.searchDefaultText + '" />' + '</div>' + '<div id="' + availableItemsID + '"></div>' + '</div>' + '<div id="' + selectedItemsContainerID + '">' + '<div id="' + selectedValuesID + '"></div>' + '<div id="' + selectedItemsID + '"></div>' + '</div>'); //Show the list of available items displayAvailableItems(); $('#' + availableItemsContainerID).css({ 'width': params.availableItemsContainerWidth + params.unitOfMeasurement, 'height': params.availableItemsContainerHeight + params.unitOfMeasurement }); $('#' + selectedItemsContainerID + ', #' + selectedItemsID).css({ 'width': params.selectedItemsContainerWidth + params.unitOfMeasurement, 'height': params.selectedItemsContainerHeight + params.unitOfMeasurement }); function displayAvailableItems() { //Clear out the available items $("#" + availableItemsID).html(''); //Do other stuff } }); } }) })(jQuery); 

Answer 1

Firstly, you need to move var params to your this.each, however after that you will have a variable climb (not quite sure what actually happens, but what it looks like) due to using the argument name as a variable name that calls undefined parameters. To solve this, simply rename the params inside it. For something else. Example:

 $.fn.extend({ pluginName: function (params) { //Merge default and user parameters var otherGeneralVars = 'example'; return this.each(function () { var $t = $(this), opts = $.extend({},$.pluginName.defaults, params); $t.text(opts.foo + uniqueId); }); } }) 

http://jsfiddle.net/M99EY/1/