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

You've misspelled click as clicl in setupFCConfig()

CodingIntrigue
– CodingIntrigue

2013-09-24 06:50:57 +00:00
Commented Sep 24, 2013 at 6:50 — CodingIntrigue
– CodingIntrigue, Commented Sep 24, 2013 at 6:50
There is a typo, clicl should be click

Srinivas Reddy Thatiparthy
– Srinivas Reddy Thatiparthy

2013-09-24 06:51:14 +00:00
Commented Sep 24, 2013 at 6:51 — Srinivas Reddy Thatiparthy
– Srinivas Reddy Thatiparthy, Commented Sep 24, 2013 at 6:51

jfriend00 · Accepted Answer · 2013-09-24 06:52:23Z

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.

Patrick Evans · Accepted Answer · 2013-09-24 06:54:51Z

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.

Martin · Accepted Answer · 2013-09-24 06:57:55Z

2

Use it this way jsFiddle updated In the scope of $.fn.investPage the this is not the $.fn.investPage object. So your object does not know the function setupFCConfig().

But you can use:

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

to achive your goal.

answered Sep 24, 2013 at 6:57

Martin

3,3461 gold badge29 silver badges50 bronze badges

Comments

Suresh Pattu · Accepted Answer · 2013-09-24 07:48:14Z

2

you can make an object and use it for namespace like below too

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


investPage.init();
investPage.setupFCConfig();

http://jsfiddle.net/LaUaE/12/

edited Sep 24, 2013 at 7:48

Suresh Pattu

6,28718 gold badges62 silver badges93 bronze badges

answered Sep 24, 2013 at 7:02

user2587132

Comments

Gurminder Singh · Accepted Answer · 2013-09-24 07:08:10Z

1

Change the code to :

(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()');
        });
  };
})( jQuery );

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

edited Sep 24, 2013 at 7:08

answered Sep 24, 2013 at 6:59

Gurminder Singh

1,75516 silver badges19 bronze badges

1 Comment

Patrick Evans Over a year ago

this will not work as you do not have an instance of investPage, to access the setupFCConfig method like you have at the bottom you would have to change it to be a property of investPage, ie: $.fn.investPage.setupFCConfig = function

Collectives™ on Stack Overflow

How to call the jQuery nested function

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related