扩展on（）函数的jQuery插件不接受“ this”

Question

I'm writing a plugin to extend the on() function of jQuery to implement mousetrap.js

I should get from the function this and pass it to on() .

This is my code:

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

The problem is that if I use it the event is attached to all the elements and not only the one selected.

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

What am I doing wrong?

Answer 1

1. You are missing event type "click" in .off function.
2. Second argument to .on function in your case has to be selector (what you are passing is jQuery object)

Following is the updated code

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

Hope it helps...

Answer 2

This is my solution, thanks for the suggestion of @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;
 };

In this way I will call this in the same way of how I would call the on() and off() functions.

Answer 3

The second parameter to .on() is a selector string, not an element. You should just omit the second parameter and bind the click to this instead of 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/