Question

有许多与我的问题相关的主题，我经历了大部分主题，但我没有做对。我的问题最接近的帖子如下：

How to call functions that are nested inside a JQuery Plugin?

下面是我正在使用的jquery插件。在调整大小时，将重新计算元素大小。我现在试图从jquery插件外部调用函数resizeBind（），它给了我错误

我尝试了以下组合来调用函数

$。fn.splitter（）。resizeBind（）

$。fn.splitter.resizeBind（）

任何想法，我出错了？

;(function($){  
$.fn.splitter = function(args){
//Other functions ......

$(window).bind("resize", function(){                    
resizeBind();  
});

function resizeBind(){  
   var top = splitter.offset().top;
   var wh = $(window).height();
   var ww = $(window).width();
   var sh = 0; // scrollbar height      
if (ww <0 && !jQuery.browser.msie ) 
    sh = 17;        
    var footer = parseInt($("#footer").css("height")) || 26; 
    splitter.css("height", wh-top-footer-sh+"px");
    $("#tabsRight").css("height", splitter.height()-30+"px");                       
    $(".contentTabs").css("height", splitter.height()-70+"px");             
    }   
return this.each(function() {
});
};
})(jQuery);

Answer 1

我遇到了同样的问题。关于相关帖子的答案对我的案例也不起作用。我使用事件在一轮中解决了它。

下面的示例演示了如何调用一个函数，该函数将三个内部数据值乘以给定的乘数，并返回结果。要调用该函数，您将触发一个事件。处理程序依次触发包含结果的另一个事件。您需要为结果事件设置一个侦听器。

这是插件 - 主要由在线向导创建的标准jQuery插件架构：

(function($){

    $.foo = function(el, options){

        // To avoid scope issues, use 'base' instead of 'this'
        var base = this;
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        // Add a reverse reference to the DOM object
        base.$el.data("foo", base);

        base.init = function(){

            base.options = $.extend({},$.foo.defaultOptions, options);

            // create private data and copy in the options hash
            base.private_obj = {};
            base.private_obj.value1 = (base.options.opt1);
            base.private_obj.value2 = (base.options.opt2);
            base.private_obj.value3 = (base.options.opt3);


            // make a little element to dump the results into
            var ui_element = $('<p>').attr("id","my_paragraph").html(base.private_obj.value1 +" "+ base.private_obj.value2+" " +base.private_obj.value3);
            base.$el.append(ui_element);                


            // this is the handler for the 'get_multiplied_data_please' event. 
            base.$el.bind('get_multiplied_data_please', function(e,mult) {  
                bar = {};
                bar.v1 = base.private_obj.value1 *mult;
                bar.v2 = base.private_obj.value2 *mult;
                bar.v3 = base.private_obj.value3 *mult;
                base.$el.trigger("here_is_the_multiplied_data", bar);
            });

        };

        base.init();
    }


    $.foo.defaultOptions = {
        opt1: 150,
        opt2: 30,
        opt3: 100
    };

    $.fn.foo = function(options){
        return this.each(function(){
            (new $.foo(this, options));
        });
    };

})(jQuery);

因此，当文档准备就绪时，您可以像往常一样将对象附加到元素。并同时为结果事件设置处理程序。

$(document).ready(function(){   
    $('body').foo();

    $('body').live('here_is_the_multiplied_data', function(e, data){
        console.log("val1:" +data.v1);
        console.log("val2:" +data.v2);
        console.log("val3:" +data.v3);
        $("#my_paragraph").html(data.v1 +" "+ data.v2+" " +data.v3);
    });
})

剩下的就是触发事件并将其传递给乘数值您可以在控制台中键入它 - 或者从一个从另一个UI元素中选取乘数的按钮触发它

$('body').trigger('get_multiplied_data_please', 7);

免责声明;） - 我对jQuery很陌生 - 对不起，如果这是用锤子破解坚果。

Answer 2

resizeBind函数被定义为私有，因此您无法从其范围之外访问它。如果要在其他范围内使用它，则需要将其定义为

$.fn.resizeBind = function() { ... }

然后你会像$(selector').resizeBind()

那样称呼它

Answer 3

您已在与全局范围不同的范围中定义了resizeBind函数。如果你不使用另一个javascript框架或任何其他使用$ function（以防止冲突）你可以删除

(function($){ 

...

})(jQuery);

语句并以这种方式可以在任何地方调用该函数而不会出现错误

Answer 4

我没有测试它：

this.resizeBind = function() { .... }

在嵌套的jquery插件中调用函数

4 个答案: