Question

Sorry if this is a base question but I seem to have a misconception on how plugins in JQuery work and Google ain’t helping much.

Imagine I have:

methods = {
    init : function(opts){

        options = $.extend(options, opts);

        return this.each(function(){
            data = $(this).data('prodigal');

            if(!data){

                if(options.isActive === false){
                    $(options.tpl.overlay).css({ 'opacity': options.overlay.opacity }).appendTo('body');
                    options.isActive = true;
                }
            }
        });
    }
};

Now options.isActive is a boolean of true or false to say whether or not the options.tpl.overlay option should be added to the body of the document. It ensures my options.tpl.overlay appends only once to the document and it works, but I am unsure how it works.

When I call:

$('.view_title_images').prodigal();
$('.glglg').prodigal();

It still only adds once. I was always led to believe that the plugin is formed and the init function called for every “call” you make, i.e. $('.view_title_images,.glglg').prodigal(); would form and call the init function once.

So how exactly does the init function run in a JQuery plugin?

Answer 1

I am seeing this behaviour because the plugin is actually instantiated the first time it is run as a static object within the jQuery plugin framework.

So every successive call to the init function will call this global object. Since the options object is a reference to that object in the static object changing the boolean each time is actually saved for future calls to the plugin.