Question

我正在编写一个插件来扩展jQuery的 on() 函数来实现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

您在"click"函数中缺少事件类型.off。
你的案例中.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()和off()函数相同的方式调用此方法。

Answer 3

.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/

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

3 个答案: