javascript - on() 関数を拡張する jQuery プラグインが「this」を受け入れない

Question

on()jQueryの機能を拡張してmousetrap.jsを実装するプラグインを書いています

関数から取得してthisに渡す必要がありon()ます。

これは私のコードです:

    $.fn.superon = function (keys, myfn) {
        $("body").on("click", this, function (e) {
            myfn();
        });
        Mousetrap.bind(keys, function () {
            myfn();
        });
    };
    $.fn.superoff = function (keys) {
        $("body").off(this);
        Mousetrap.unbind(keys);
    };

問題は、それを使用すると、選択した要素だけでなく、すべての要素にイベントが関連付けられることです。

http://jsfiddle.net/zkLMX/1/

私は何を間違っていますか？

Answer 1

1. "click"関数にイベント タイプがありません.off。
2. あなたの場合の関数の2番目の引数.onはセレクターでなければなりません（あなたが渡しているのはjQueryオブジェクトです）

以下は更新されたコードです

(function ($) {
    $.fn.superon = function (selector, keys, myfn) {
        $("body").on("click", selector, function (e) {
            myfn();
        });
        Mousetrap.bind(keys, function () {
            myfn();
        });
        return this;
    };
    $.fn.superoff = function (selector, keys) {
        $("body").off("click", selector);
        Mousetrap.unbind(keys);
        return this;
    };
})(jQuery);


$("#click").superon("#click", "a", function () {
    alert("hello");
    $("#click").superoff("a");
});

});

$("#click2").superon("#click2", "b", function () {
    alert("hello2");
    $("#click2").superoff("b");
});

それが役に立てば幸い...

Answer 2

これが私の解決策です。@devnull69 の提案に感謝します。

 // on() with keyboard shortcut support
 $.fn.superon = function (selector, keys, myfn) {
   this.on("click", selector, function (e) {
     myfn();
   });
   Mousetrap.bind(keys, function () {
     myfn();
   });
   return this;
 };

 // off() with keyboard shortcut support
 $.fn.superoff = function (selector, keys) {
   this.off("click", selector);
   Mousetrap.unbind(keys);
   return this;
 };

on()このようにして、 and関数を呼び出すのと同じ方法でこれを呼び出しoff()ます。

Answer 3

の 2 番目のパラメーター.on()は、要素ではなく、セレクター文字列です。this2 番目のパラメーターを省略して、代わりにクリックをバインドする必要があります。body

$.fn.superon = function (keys, myfn) {
    this.on("click", function (e) {
        myfn();
    });
    Mousetrap.bind(keys, function () {
        myfn();
    });
};
$.fn.superoff = function (keys) {
    this.off("click");
    Mousetrap.unbind(keys);
};

http://jsfiddle.net/zkLMX/4/