jquery: how can I chain functions?

Question

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 accomplish 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

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

Fabrizio Calderan · Accepted Answer · 2012-09-05 08:37:35Z

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.net/kzzMY/

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

edited Sep 5, 2012 at 8:37

answered Sep 5, 2012 at 8:25

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chinchan Zu Over a year ago

wow! this works! but can i ask you what is the difference of $.fn.test from $.test?

Fabrizio Calderan Over a year ago

$.fn.test is the properly and correct way to add a function to jQuery prototype and thus, create a plugin (while $.test is like just adding a property to jQuery function)

Chinchan Zu Over a year ago

oh i see, thanks so much man! i will try and look at the link!

Mild Fuzz · Accepted Answer · 2012-09-05 08:22:44Z

1

here is my plugin template:

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

  }
  return this;
})(jQuery)

answered Sep 5, 2012 at 8:22

Mild Fuzz

31.3k34 gold badges106 silver badges152 bronze badges

Comments

Tim Croydon · Accepted Answer · 2012-09-05 08:23:25Z

1

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.

answered Sep 5, 2012 at 8:23

Tim Croydon

1,8961 gold badge19 silver badges30 bronze badges

Collectives™ on Stack Overflow

jquery: how can I chain functions?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related