0

这看起来很简单，但由于某种原因，它没有按预期工作。

我正在尝试制作一个非常简单的 jQuery 扩展/插件，它允许我在需要一个enter键上的触发器时简单地减少我的代码行（以及类似的escape）

这是我的代码：

$.fn.enterListen = function (callBack) {
    $(this).on('keyup', function (e) {
        if (e.keyCode == 13) {
            callBack;
            // $(this).enterListen(callBack); // trying to rebind...
        };
    })
};

然后，当使用 jquery 动态创建元素时，我们可能会执行以下操作：

var input = $('<input'>).enterListen(function (){ alert("Enter was pressed"); });
$(input).appendTo('body');

现在我们已经在页面中添加了一个输入元素，我们可以在其中输入，当enter按下它会触发警报。

这有效，除了，只有一次。

您可以在上面的代码中看到一条注释掉的行，在该行中我试图在enter触发器被激活后重新绑定元素的函数，即使这样也不能让它第二次工作。

您可以在按 之前按任意数量的其他键Enter，但是一旦您这样做，它似乎会取消绑定keyup事件。

如果...但是，我这样运行它：

function isEnter(e, ele) {
    if ((e * 1) == 13) {
        $(ele).click();
    };
};

调用者：

var input = $('<input'>).on('keyup', function (e) { isEnter(e.keyCode, $(ok)) });
$(input).appendTo('body');

它工作得很好，但对我来说它在代码中比较笨拙，我正在尝试创建一个扩展库以使这个项目的内部编码更短......也许我只是在我需要的事情上投入了太多时间'你...

无论如何，如果有人能解释为什么事件变得不受约束，那就太好了！

4

1 回答 1

1

jQuery 插件内部this是 jQuery 对象，无需重新包装。e.which在 jQuery 中被标准化。要执行一个函数，你需要括号()。最重要的是，您需要返回，this否则input变量将未定义，并且如果您打算在插件内部使用包含多个元素的选择器进行操作，则需要返回this.each(function() { ... })等，如jQuery的插件创作文档中所述。

$.fn.enterListen = function (callBack) {
    return this.each(function() {
        $(this).on('keyup', function (e) {
            if (e.which == 13) {
                e.preventDefault();
                callBack();
            }
        });
    });
};

var input = $('<input />').enterListen(function (){ 
    alert("Enter was pressed"); 
});

input.appendTo('body');

小提琴

于 2013-01-27T11:11:29.980 回答