1

カスタム イベントを 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 オブジェクトにイベントをアタッチ/トリガーすることですが、プラグイン インスタンスにアタッチされたイベントをトリガーしたいと考えています。それは可能ではありませんか？

前もって感謝します。

4

2 に答える 2

4

コードの変更とその動作

あなたのコードでは、別のオブジェクトでイベントをトリガーし、ハンドラーを別のオブジェクトにアタッチします。

以下で試してください

 triggerChange : function () {

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


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

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

于 2013-05-12T08:30:57.893 に答える
2

カスタム イベントを発生させるリンクが必要であり、そのリンクでカスタム イベントをリッスンします。

プラグインは jQuery オブジェクトを返さないため、.on関数を null 戻り値にチェーンしようとしても何もしません。リンク ID を使用するか、オブジェクトを返して、関数チェーンが機能し続けるようにしてください。

私はそれを次のように変更しました：

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

フィドル: http://jsfiddle.net/FhqNf/4/

于 2013-05-12T08:31:59.850 に答える