jQuery插件实例上的自定义事件触发器

Question

我无法将自定义事件添加到jQuery插件。

我做了一个非常简单的jQuery插件从我触发一个事件，但是附加的处理程序不正确地触发：如果我用我的插件http://jsfiddle.net/FhqNf/2/

(function($) { 

var my_plugin = function(link, opts) { 

    var $this = this, img, o={}; 

    defaults = { 
     color: 'rgb(255, 0, 0)' 
    }; 

    $.extend(this, $.fn, { 
     init : function() { 
      o = $.extend(defaults, opts); 
      link.on('click', $this.changeColor); 
     }, 

     changeColor : function (e) { 
      if(link.css('color') == o.color) 
       link.css('color', 'blue'); 
      else 
       link.css('color', o.color); 

      $this.triggerChange(); 
     }, 

     triggerChange : function() { 
      $this.triggerHandler('custom', {test: 'ok', color: o.color}); 
     } 
    }); 

    this.init(); 

}; 

$.fn.my_plugin = function(opts) { 
    return new my_plugin(this, opts); 
}; 

然后和附加功能，我的“定制“事件处理程序，该事件不火：

var test1 = $('#test1').my_plugin(); 
test1.on('custom', function (data) { console.log(data); alert('test1') }); 

编辑：解决方法是将附加/‘链接’DOM对象触发事件，但我想触发连接到我的插件实例的事件。这不可能吗？

在此先感谢。

Answer 1

一些代码修改和不同的对象上工作

在你的代码的触发事件和附加处理程序不同的对象。

试试下面

triggerChange : function() { 

      link.trigger('custom', {test: 'ok'}); 
     } 


$.fn.my_plugin = function(opts) { 
      new my_plugin(this, opts); 
     return this; 
    }; 

http://jsfiddle.net/FhqNf/3/

Answer 2

您需要触发自定义事件的链接，然后有链接监听自定义事件。

你的插件没有返回一个jQuery对象，因此试图将.on函数链接到null返回将不会执行任何操作。尝试使用链接ID或返回对象来保持函数链接工作。

我把它改为：

link.trigger('mycustomevent'); 
$("#test1").on('mycustomevent'....); 

小提琴：http://jsfiddle.net/FhqNf/4/