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

然后，如果我使用我的插件并将功能附加到我的自定义＆＃39;事件处理程序，该事件不会触发：

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

编辑：解决方法是在＆＃34;链接＆＃34;上附加/触发事件。 dom对象，但我想触发附加到我的插件实例的事件。这不可能吗？

提前致谢。

Answer 1

SOme代码修改及其工作

在您的代码中，您在不同对象上触发事件并将处理程序附加到不同对象。

尝试以下

 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/

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

2 个答案: