How to call the jQuery nested function

Question

I am trying to call the nested function is not working
Here is what I tried jsfiddle

Script:

(function( $ ){
      $.fn.investPage = function() {    
            function setupFCConfig(){
                $('.nestedFunction').click(function(){
                    alert('setupFCConfig func()');
                });
            }
            $(".edit").on('click', function(){
                alert('edit click func()');
            }); 
            $(".cancel").on('click', function(){        
                alert('cancel click func()');   
            }); 
            $(".checkout").click(function(){        
                alert('checkout click func()');
            });
      };
})( jQuery );

$.fn.investPage();
$.fn.investPage.setupFCConfig();

Answer 1

setupFCConfig() is NOT a property of the $.fn.investPage object so it can't be called like this:

 $.fn.investPage.setupFCConfig();

It is a local function that is not available outside the scope in which it is declared. If you want it available from an outside scope, then you need to assign it to be a property of some object that is available in that outside scope.

For example, you could change the definition of that function to be like this:

(function( $ ){
      $.fn.investPage = function() {    
            $(".edit").on('click', function(){
                alert('edit click func()');
            }); 
            $(".cancel").on('click', function(){        
                alert('cancel click func()');   
            }); 
            $(".checkout").click(function(){        
                alert('checkout click func()');
            });

      };
      $.fn.investPage.setupFCConfig = function (){
           $('.nestedFunction').click(function(){
               alert('setupFCConfig func()');
           });
      }

})( jQuery );

$.fn.investPage();
$.fn.investPage.setupFCConfig();

FYI, you also need to fix the misspelling of .click.

Answer 2

you are using the wrong scope for the function

(function( $ ){
      $.fn.investPage = function() {    
            $(".edit").on('click', function(){
                alert('edit click func()');
            }); 
            $(".cancel").on('click', function(){        
                alert('cancel click func()');   
            }); 
            $(".checkout").click(function(){        
                alert('checkout click func()');
            });
      };
      $.fn.investPage.setupFCConfig = function(){
          $('.nestedFunction').click(function(){
              alert('setupFCConfig func()');
          });
      };
})( jQuery );

JSFiddle

or

(function( $ ){
      $.fn.investPage = function() {
          this.setupFCConfig = function(){
              $('.nestedFunction').click(function(){
                  alert('setupFCConfig func()');
              });
          };          
            $(".edit").on('click', function(){
                alert('edit click func()');
            }); 
            $(".cancel").on('click', function(){        
                alert('cancel click func()');   
            }); 
            $(".checkout").click(function(){        
                alert('checkout click func()');
            });
          return this;
      };
})( jQuery );

var page = $.fn.investPage();
page.setupFCConfig();

JSFiddle

The second returns the investPage object where you can than access the function from the object variable.