i use jquery for a long time and thinking of creating a plugin myself. but no matter how easy the tutorial was, i cant really grasp the idea of chaining. suppose i have this very simple plugin....

(function($){
      $.test = function(){

        $.test.one = function(){ alert("1");};

        $.test.two = function(){ alert("2");};

        return this.each(function(){
             (what to write here????)
        });
      };
 })(jQuery);

what i want to acplish is, when i call like eg

var myplugin = $.test();
myplugin.one().two();

but it returns me errors. sorry, i tried many times googling simple tutorials but i cant get this working

i use jquery for a long time and thinking of creating a plugin myself. but no matter how easy the tutorial was, i cant really grasp the idea of chaining. suppose i have this very simple plugin....

(function($){
      $.test = function(){

        $.test.one = function(){ alert("1");};

        $.test.two = function(){ alert("2");};

        return this.each(function(){
             (what to write here????)
        });
      };
 })(jQuery);

what i want to acplish is, when i call like eg

var myplugin = $.test();
myplugin.one().two();

but it returns me errors. sorry, i tried many times googling simple tutorials but i cant get this working

• javascript
• jquery
• jquery-plugins

Share Improve this question Follow edited Sep 5, 2012 at 8:28 Fabrizio Calderan 123k2626 gold badges170170 silver badges182182 bronze badges asked Sep 5, 2012 at 8:17 Chinchan ZuChinchan Zu 91855 gold badges2020 silver badges4040 bronze badges 1

• If you haven't yet, I strongly remend you to take a look at the jQuery's plugins/authoring guide docs.jquery./Plugins/Authoring – davids Commented Sep 5, 2012 at 8:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Are you trying to do this?

(function($){
    $.fn.test = function(){
        var self = this;
        this.one = function(){ alert("1"); return self; };
        this.two = function(){ alert("2"); return self; };
        return this;
    };
}(jQuery));


var myplugin = $().test();
myplugin.one().two();

Example Fiddle: http://jsfiddle/kzzMY/

As a side note I strongly suggest this useful resource on the subject : http://jqueryboilerplate./

here is my plugin template:

(function($){
  $.fn.pluginName = function(){

  }
  return this;
})(jQuery)

Never written a jQuery plugin myself but surely you need to return something from your methods one and two (probably 'this') or there is no object for the second method in your chain to be called on.