Question

My plugin has to do different things for each object, and at the same time I need to be able to call various methods, and do many other things.

What I want to happen here is, that when a user clicks on the first button it should call the function for test_one div not for test_two.

My code on jsFiddle:

<button class="test_one">First</button >

<button class="test_two">Second</button >

<div class="called_for"></div>

(function($){
    var globalSettings = {
        success: function(){}
    };

    var methods = {
        init : function(options){
            settings            = $.extend({},globalSettings,options);

            $(this).click(function(){
                settings.success();                
            });                
        }                
    }

    $.fn.test = function(method, options){
        if(methods[method])
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        else if(typeof method === 'object' || !method)
            return methods.init.apply(this, arguments);
        else
            $.error('Method ' + method + ' does not exist');
    };

})(jQuery);


$(".test_one").test({
    success: function(){
        $(".called_for").text("I got called for 'test_one'");
    }
});


$(".test_two").test({
    success: function(){
         $(".called_for").text("I got called for 'test_two'");
    }
});

​

Answer 1

You didn’t declare settings, so it was global and thus overwritten by the second plugin call. Do use var: http://jsfiddle.net/q6e38/4/.

var settings = $.extend({}, globalSettings, options);