【问题标题】:How to call function inside jquery plugin after plugin is initialised插件初始化后如何在jquery插件中调用函数
【发布时间】:2017-05-19 15:32:16
【问题描述】:

I',创建我自己的 jQuery 插件,它可以分配给文档中的多个元素。在某些事件中,我想为该特定元素调用插件内部的函数,但一切都让我发疯。插件本身可以工作,但存在外部调用问题。

简单的插件:

(function ( $ ) {
    $.fn.myPlugin = function (options) {
        var settings = $.extend({
            someOption: ""
        }, options);
        return this.each(function () {
            _init();
            _load();
        });
        function _init() {
            //some action..
        }
        function _load() {
            //some action..
        }
    };
    $.fn.myPlugin.reload = function () {
        _load(); //or this._load();
    }
}( jQuery ));

在 html 中:

<div id="div1"></div>
<button id="button1">Click to reload</div>
<script>
    $(document).ready(function() {
        var A=$("div1").myPlugin({
            someOption:"someValue"
        });
        $("#button1").click(function(){
            A.reload();
        });
    });
</script>

返回始终是 _load() 未定义...任何想法都会非常感激。

【问题讨论】:

  • 这些函数仅在调用$.fn.myPlugin 时创建的上下文中可用。 $.fn.myPlugin.reload 无法访问它。您必须将上述功能移到可以访问它们的其他地方,或者重新考虑如何定义/使用$.fn.myPlugin.reload
  • 我的建议是不要使用$.fn.myPlugin.reload,而是让你的函数接受一个可选的字符串参数。如果第一个参数是'reload',则在当前集合上运行_load方法,否则做正常的事情。
  • @KevinB 这听起来更像 jquery 的工作原理
  • 我同意删除$.fn.myPlugin.reload ...但是插件在初始化时会为分配的div元素创建一堆html元素。当我使用不同的参数再次初始化时,该参数不是同一个对象,并且不起作用。
  • 对...但关键是如果您传入所述字符串参数而不是对象,init 将不会运行。只加载。当然,您还需要将传入的选项存储在某个地方,这样第二次运行仍然会有它们。

标签: javascript jquery jquery-plugins


【解决方案1】:

您在定义函数之前返回,如果 reload 函数不在更高的范围内,也无法从 reload 函数访问 _load:

(function ( $ ) {
//function definitions:
    function _init() {
        //some action..
    }
    function _load() {
        //some action..
    }


 $.fn.myPlugin = function (options) {
     var settings = $.extend({
        someOption: ""
    }, options);

    return this.each(function () {
        _init();
        _load();
    });

};
$.fn.myPlugin.reload = function () {
    _load(); //
}
}( jQuery ));

注意可以这样访问:

 $.myPlugin.reload();

重新加载不是 myPlugin 实例的一部分。

如果您想为每个实例返回一个自定义对象,请执行以下操作:

 (function ( $ ) {
 $.fn.myPlugin = function (options) {
     var settings = $.extend({
        someOption: ""
    }, options);

     //function definitions:
    function _init() {
        //some action..
    }
    function _load() {
        //some action..
    }
    //iterate
    this.each(function () {
        _init();
        _load();
    });

   return {
     reload:_load,
   };
};
}( jQuery ));

现在你可以做

$("test").myPlugin().reload();

【讨论】:

  • 试过.. 不工作。如果我这样称呼它:A.reload(); 错误是:A.reload() 不是函数如果我这样称呼它:A.myPlugin.reload(); 错误是:找不到变量_load
  • @ВојинПетровић 它应该使用最后一个代码(我在中间编辑过)。如果不是问题出在其他地方...
  • 好吧,这些函数现在完全在插件之外,它们需要在里面,因为它们使用的是本地插件变量和元素。
  • @ВојинПетровић 你是什么意思?他们需要参考这个吗?
  • 函数相对于 return 语句的位置不是问题。 jsfiddle.net/yxLgumet
【解决方案2】:

A 持有对 jQuery 对象的引用,因此具有 $.fn 的所有方法。 但是您的reload 不是$.fn 的方法,而是$.fn.myPlugin 的方法。 如果您解决此问题并考虑 Jonas 的答案,那么它应该可以工作;)

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-11-17
  • 1970-01-01
  • 2015-04-08
  • 2018-12-27
  • 1970-01-01
  • 2014-07-19
  • 1970-01-01
相关资源
最近更新 更多