javascript – Method ignoring callback function in jQuery plugin

Question:

I'm developing a plugin in jQuery and the problem or difficulty is:

I created the init , show and hide methods;

(function( $ )
    $.fn.tooltip = function(method, onClick, onBefore, onAfter) {

        var default = {
            'onClick' : function() {},
            'onBefore': function() {},
            'onAfter' : function() {},
        };

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

        var methods = {
           init : function(options) {
              return this.each(function(){
                  var $this = $(this);
                  methods.show.apply($this);
                  settings.onClick.call($this);
              });
           },
           show : function() {
              return this.each(function(){
                  var $this = $(this);
                  settings.onBefore.call($this);
                  //Aqui vem a manipulação de classes...
                  .
                  .
                  .
                  .
                  .
                  methods.close.apply($this);
              });
           },
           hide : function() {
              return this.each(function(){
                  var $this = $(this);
                  settings.onAfter.call($this);
                  //Aqui vem a manipulação de classes...
              });
           }
        };

        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 );

When I call through the init method everything works fine, but when I call through the hide method $('#test').myPlugin('hide'); the hide method is executed, but the settings.onAfter($this); callback function settings.onAfter($this); is ignored.

Calling the init method

$('#test').myPlugin({
    onClick: function(){
        $('.button').myPlugin('hide');
    },
    onBefore: function(){
        $('body').addClass('onBefore');
    },
    onAfter: function(){
        $('body').addClass('onAfter');
    }
});

When I call the init method it calls show , this method does everything that needs to be done (class manipulation) and after all it calls the hide method. hide does everything that needs to be done too and then calls the onAfter callback onAfter , perfect!

But when I call the hide method via the onClick callback function, it executes the method just fine, it just ignores the onAfter callback

Answer:

I made some adjustments to your code. Run this example and look at the browser console.

   $(function(){
   $("#ipTeste").tooltip('hide');
   //$("#ipTeste").tooltip('show');
   //$("#ipTeste").tooltip('init');
});

(function($){
    $.fn.tooltip = function(method) {
        
        var defaultV = {
            'onClick' : function(el) {
                console.log("onClick...");
            },
            'onBefore': function(el) {
                console.log("onBefore...");
            },
            'onAfter' : function(el) {
                console.log("onAfter...");
                defaultV.onBefore();
                defaultV.onClick();
                
                $(el).tooltip('show');
                $(el).tooltip('init');
            }
        };
        
        var settings = $.extend({}, defaultV);
        
        var methods = {
            init : function(options) {
                return this.each(function(){
                    console.log("INIT...");
                    var $this = $(this);
                    settings.onClick.call({}, $this);
                    //Aqui vem a manipulação de classes...
                });
            },
            show : function() {
                return this.each(function(){
                    console.log("SHOW...");
                    var $this = $(this);
                    settings.onBefore.call({}, $this);
                    //Aqui vem a manipulação de classes...
                });
            },
            hide : function() {
                return this.each(function(){
                    console.log("HIDE...");
                    var $this = $(this);
                    settings.onAfter.call({}, $this);
                    //Aqui vem a manipulação de classes...
                });
            }
        };
        
        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 );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ipTeste"/>