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

以这种方式使用jsFiddle updated 在$.fn.investPage的范围内，this不是$.fn.investPage对象。因此，您的对象不知道函数setupFCConfig()。

但你可以使用：

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

实现目标。

Answer 4

将代码更改为：

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

Answer 5

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

    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/

如何调用jQuery嵌套函数

5 个答案: