Calling multiple instances of jQuery plugin

Question

I have a simple jQuery plugin that I want to be able to call on multiple elements on a single page.

As of now I declare selectors explicitly, but I would like them to be relative to the object the plugin was called on. How can I do this?

(function($) {

    var MyPlugin = function(options){

        var plugin      = $(this); // The entire myPlugin object
        var element     = $("div#plugined div#element"); // An element in myPlugin
        var pluginChild = $( ); // Need selector of what plugin was called on + additional slider. ("div#plugined div#child")

        this.publicFunction = function() {
            // something...
        }

        var privateFunction = function() {
            // something private...
        }
    };

    $.fn.myPlugin = function(options) {

        var defaults = {
            // options
        }

        var options = $.extend(defaults, options);

        var myPlugin = new MyPlugin(options);

        $("div#plugined a.arrow").bind('click', function(e){ // Same problem. Need selector of what plugin was called on + additional slider. ("div#plugined div#child")
            e.preventDefault();
            myPlugin.publicFunction();
        });

        return myPlugin;
    };
})(jQuery);


<script type="text/javascript">
    $(window).load(function() {
        $('div#plugined').myPlugin();
    });
</script>

pimvdb · Accepted Answer · 2012-11-13 15:13:48Z

1

You would have to pass the current jQuery set along:

var myPlugin = new MyPlugin(this, options);

Inside myPlugin, do something like:

var MyPlugin = function($set, options){
    // ...
    var pluginChild = $set.find(".child");

Note that this in your code refers to the MyPlugin instance, so it doesn't make much sense to call $(this).

answered Nov 13, 2012 at 15:13

pimvdb

155k80 gold badges313 silver badges358 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Michael Gruber Over a year ago

This works. I can select var element = $set.child("div#element"); However, when I call myPlugin on multiple DOM elements ($('div#plugined1').myPlugin(); $('div#plugined2').myPlugin();) The two still seem to interfere with one another.

pimvdb Over a year ago

@Michael Gruber: Did you also make the selector inside the $.fn function relative? Otheriwse, two click handlers will be bound, and each one refers to its own instance.

Michael Gruber Over a year ago

The bind function? $("div#plugined a.arrow").bind() is now this.children("a.arrow").bind()

pimvdb Over a year ago

How do they interfere? Each element is determined relatively, and should have its own instance bound this way.

Michael Gruber Over a year ago

It seems variables (maybe only integer variables) in the second instance are overwriting the first.

|

Allan Kimmer Jensen · Accepted Answer · 2012-11-13 15:19:43Z

1

On http://docs.jquery.com/Plugins/Authoring you can find some basic code that describes how to do this.

Have a look at this example:

(function( $ ){

  $.fn.tooltip = function( options ) {  

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);

    return this.each(function() {        

      // Tooltip plugin code here

      $(this) // Will return the selected element

    });

  };
})( jQuery );

In the this.each loop you can run code on $(this), this will give you each selected element.

answered Nov 13, 2012 at 15:19

Allan Kimmer Jensen

4,4192 gold badges35 silver badges54 bronze badges

1 Comment

user400654 Over a year ago

And to expand on this, within the this.each(...) you create your instance and store it on the element with $(this).data('myplugin',myinstance) so that you can later access it with $(el).data('myplugin') on future calls to the plugin.

Collectives™ on Stack Overflow

Calling multiple instances of jQuery plugin

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related