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. 在您的情况下，函数的第二个参数必须.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()andoff()函数相同的方式调用它。

Answer 3

to的第二个参数.on()是一个选择器字符串，而不是一个元素。您应该省略第二个参数并将点击绑定到this而不是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/