javascript - 如何调用jQuery嵌套函数

Question

我试图调用嵌套函数不起作用
这是我尝试过的 jsfiddle

脚本：

(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()不是 $.fn.investPage 对象的属性，因此不能这样调用：

 $.fn.investPage.setupFCConfig();

它是一个局部函数，在声明它的范围之外不可用。如果您希望它在外部范围内可用，那么您需要将其分配为在该外部范围内可用的某个对象的属性。

例如，您可以将该函数的定义更改为如下所示：

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

仅供参考，您还需要修复.click.

Answer 2

您为函数使用了错误的范围

(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

或者

(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

第二个返回investPage您可以从对象变量访问函数的对象。

Answer 3

您也可以创建一个对象并将其用于命名空间，如下所示

    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/

Answer 4

使用这种方式jsFiddle 更新$.fn.investPage了在thisis not $.fn.investPageobject 的范围内。所以你的对象不知道这个功能setupFCConfig()。

但是你可以使用：

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

来实现你的目标。

Answer 5

将代码更改为：

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