Question

我写了一个简单的jQuery插件。我的插件使用＆＃39; forward＆＃39;创建一个HTML元素。按钮。按钮执行一些操作，如果用户设置了一个回调，则可以调用回调。

我可以在初始化阶段添加回调，如（选项1）：

$('selector').myPlugin({onForward: function(){console.log('forward'); } });

这很好。

但是当我尝试在创建插件后设置回调（选项2）：

var $plugin = $('selector').myPlugin();
$plugin.myPlugin('onForward',function(){console.log('forward'); });

该插件未触发回调。

我有一个＆＃39;默认＆＃39;我用来保存回调的变量。

var defaults = {
 onForward:         function (){}, // initialize with empty callback
}

当我用＆＃34; onForward＆＃34;方法，使用调试器，我可以看到defaults.onForward的值是用新的回调设置的，但是当按钮被触发时，似乎像按钮一样忘了＆＃39;我之前设置的方法，并使用初始化中的默认空方法。

以下是插件代码的片段：

    (function($){
    $.fn.myPlugin = function(methodOrOptions){

        var $self = $(this);
        var defaults = {
                onForward:      function (){},
        };
        var methods = {
                init: function(options){
                    $.extend(defaults,options);
                    $self.find('button#forward').on('click',events.forward); 
                    return $self;
                },
                onForward: function(callback){
                    defaults.onForward      = callback; // setting the callback after initialization
                },

        };
        var events = {
                forward: function(){
                    // do stuff and call the callback
                    defaults.onForward();
                }
        }
        if(methods[methodOrOptions]){
            return methods[methodOrOptions].apply(this,Array.prototype.slice.call( arguments, 1 ));
        }
        else if(typeof(methodOrOptions) === 'object' || !methodOrOptions ){
            return methods.init.apply(this,arguments)
        }
        else{
            console.log('error: method: '+methodOrOptions+' does not exists');
        }

})(jQuery);

我做错了什么？ THX

Answer 1

似乎问题在于，每次调用myPlugin()函数时，实际上都会获得defaults的新实例。因此，您在第一次调用中修改的实例实际上与您在第二次调用中修改的实例不同。

为了避免这种情况，您必须将默认值存储在组件的data()对象中，然后在每个函数调用的新时间单位调用它：

$self.data("defaults", defaults)

要在前进方法中再次获得它，你必须做这样的事情：

onForward: function(callback){
   var $self = $(this);                    
   $self.data("defaults").onForward = callback; 
}

你的事件处理程序应该看起来像这样：

 var events = {
     forward: function(){
        $self.data("defaults").onForward();
     }
 }

请在此处查看工作小提琴：http://jsfiddle.net/s4rjh9a4/1/

在插件初始化之后添加回调到插件

1 个答案: