Question

I have written a jQuery plugin below and would like to be able to call it again for the same instance on an element.

The plugin goes…

(function($) {
    $.fn.myPlugin = function(options){

        var settings = {
            color: null
        };

        if (options) {  
            $.extend(settings, options);
        }

        return this.each(function(){
            var self = this;
            var pics = $('li', self);

            function refresh() {
                pics = $('li', self);
            };

            $('a', self).click(function(){
                pics.filter(':last').remove();
                alert(settings.color);
                refresh();
                return false;
            });
        });
    }
})(jQuery);

In the page this is called…

$('#test').myPlugin({ color: 'blue' });

Now I want to call the same plugin for the same instance but pass the string refresh as the option whilst all the other variables are the same (so color would still be blue) e.g…

$('#test').myPlugin('refresh');

This would then execute the refresh() function.

How could I achieve that with the above?

Edit: To make it clearer I am thinking of how jQuery UI does their plugins. In the sortable plugin you can do $("#sortable").sortable(); and then $("#sortable").sortable('refresh'); on the same element. This is what I am trying to achieve.

Answer 1

You can store your instance with .data() and check for it when creating an instance.

Something like:

$.fn.doStuff = function () {
  var ob = $(this);
  var data = ob.data();
  if (data.doStuff !== undefined) {
    return data.doStuff;
  }
  doStuff;
});