CODEWITHSUNDEEP
javascriptjquery
Suresh Pattu
Suresh Pattu

Reputation: 6209

How to call the jQuery nested function

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

Upvotes: 5

Views: 16637

Answers (5)

user2587132
user2587132

Reputation:

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/

Upvotes: 2

Gurminder Singh
Gurminder Singh

Reputation: 1755

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

Upvotes: 1

Martin
Martin

Reputation: 3286

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.

Upvotes: 2

Patrick Evans
Patrick Evans

Reputation: 42736

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.

Upvotes: 3

jfriend00
jfriend00

Reputation: 707298

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.

Upvotes: 9

Related Questions