Question

I have this plugin issue for ages but can’t get it right.

Here is the test page. When you click on the page button, it should alert page twice, but it alert photo at the second time.

It does that because I re-use that plugin for another button called ‘photo’. I think the second button overwrite the first button in someway which I don’t quite understand why it does.

$(document).ready(function(){

    $('.get-page').get_overlay({
        targetObject:         '.page'
    });

    $('.get-photo').get_overlay({
        targetObject:         '.photo'
    });

});

Then this means that this plugin cannot be reused at all then what is the point having a plugin in the first place?

Any idea where I have done wrong in this plugin? How can I fix it?

(function($){

    $.fn.get_overlay = function(options) {

             var defaults = {
                targetObject:            ''
            }

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

            var $cm = this.click(function() {

                alert(o.targetObject);

                $.fn.get_overlay.centralise();

                return false;



            });

            if(!$.fn.get_overlay.centralise) $.fn.get_overlay.centralise = {};

            $.fn.get_overlay.centralise = function() {

                alert(o.targetObject);

            }

    }      
})(jQuery);​

Answer 1

@lauthiamkok, I think you need to revise the plugin authoring guide at jquery docs. It’s probably not a good idea to do this $.fn.get_overlay.centralise inside you plugin. If you want to have access to centralise() from the public scope you should make it a method. Then, as the authoring guide advises, it’s recommended to return the jquery object to allow chaining for your plugin.
Check working example at http://jsfiddle.net/elclanrs/FrMSY/1/

$.fn.get_overlay = function(options) {

    var o = $.extend({
        targetObject: ''
    }, options);
    var $this = this;

    $this.centralise = function() {
        alert(o.targetObject);
    };

    return this.each(function() {
        $(this).click(function() {
            alert(o.targetObject);
            $this.centralise();
            return false;
        });
    });

};