Question

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

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

这是我的代码：

$.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触发器后重新启动该元素的函数，即使这样也不能使它再次工作。 / p>

在按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');

它工作正常，但对我来说它在代码中更笨拙，我正在尝试创建一个扩展库，使这个项目的内部编码更短......也许我只是花了太多时间进入某些东西我不需要......

无论如何，如果有人能够阐明为什么这个事件不受约束，那就太可爱了！

Answer 1

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

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

FIDDLE

使用jQuery扩展和jquery.on将Keyup绑定到Element

1 个答案: