How to access the one of the chained functions in a plugin?

Question

How can I access the one of the chained functions in a plugin?

this is my plugin, in which I need to return an appended element on the document.

(function($){

        $.fn.extend({ 

            selection: function(options) {

                var defaults = {
                    element:     "selection"
                }

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

                var $this = this;


               $this.function_1 = function(object)
                {
                    alert('function 1');

                }

                $this.function_2 = function(object)
                {
                    alert('function 2');
                }

                $(document.body).append("<div class='element'>Loading</div>");

                var element = $('.element');

                return element;

            }
        });

    })(jQuery);

It should alerts 'function 2' when the button is clicked but it returns error on firefox.

Below is my jsffiddle,

http://jsfiddle.net/dm3ft/

score 1 · Accepted Answer · answered Dec 22 '12 at 20:22

1

One approach is to add an argument to the plugin function to pass method as string. Basics are taken from jQuery plugin authoring docs:

(function($) {

    var methods = {
        function_1: function(object) {
            alert('function 1');
        },
        function_2: function(object) {
            alert('function 2');
        }
    };


$.fn.selection = function(method, options) {

    return this.each(function(){

        $(this).click(function() {

              // Method calling logic
               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 on jQuery.tooltip');
               }
          });
    });

})(jQuery);

Then to call plugin method:

  $('.chain-function').selection('function_2'/* optional options object*/);

DEMO: http://jsfiddle.net/dm3ft/1/

NOTE: It is important that you realize that this inside the plugin function is the DOM element and not confuse it with this being part of your class

answered Dec 22 '12 at 20:22

charlietfl

170,828
13
121
150

thank you. the problem in my plugin is that there is not `click` or each `event`... – Run Dec 22 '12 at 21:06
1

`click` I understand...I just used `click` since link said "clcik here". `each` is used to loop over full collection of elements assuming you call plugin on selector that has multiple elements in DOM. If you don't want `click`, remove it and just use the code within the handler – charlietfl Dec 22 '12 at 21:08
`each` will not matter (or fail) if there is only one element in collection – charlietfl Dec 22 '12 at 21:11
Thanks. how do I return the appended element then with `each`? – Run Dec 22 '12 at 21:17
please be more specific with questions. I don't know what you mean. `return this.each` allows chaining of other jQuery methods – charlietfl Dec 22 '12 at 21:20
also asking about appended elements but only code you've shown does an alert and that's all – charlietfl Dec 22 '12 at 21:22
1

just remember `this` inside the `each` is the individual DOM element, `this` inside the plugin not inside `each`, is the whole collection of elements – charlietfl Dec 22 '12 at 21:31
I am quite confused with these two `this` to be honest. will think it through anyway... – Run Dec 22 '12 at 21:40

score 0 · Answer 2 · answered Dec 22 '12 at 20:09

You can also use jQuery.fn

$(document).ready(function(){

   $('.chain-function').function_2();

});

(function($){

    $.fn.function_2 = function(object){

        alert("yay!");
        var element = $("<div />").addClass("element").text("Loading");
        element.appendTo(  $(document.body) );
        return element;

    };

})(jQuery);

How to access the one of the chained functions in a plugin?

2 Answers2