Question

This seems very simple, but for some reason it’s not working as expected.

I am trying to make a very simple jQuery extension/plugin which allows me to simply reduce my lines of code when requiring a trigger on an enter key (and a similar for an escape)

Here’s my code:

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

Then when an element is dynamically created with jquery we might do something like:

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

Now we’ve added an input element to the page, in which we can type and when enter is pressed it triggers the alert.

This works, except, only once.

You can see a commented out line in my code above where I am trying to rebind the function the the element after the enter trigger is activated, and even that doesn’t make it work a second time.

You can press as many other keys as you like before pressing Enter, but as soon as you do, it seems to unbind the keyup event.

IF… however, I run it like this:

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

Called by:

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

It works fine, but to me it is clumsier in the code, I am trying to create a library of extensions to make the inner coding of this project a bit shorter… perhaps I am just putting too much time into something I needn’t…

Anyway, if anyone could shed any light on why the event becomes unbound, that’d be lovely!

Answer 1

Inside a jQuery plugin, this is the jQuery object, no need to rewrap it. e.which is normalized in jQuery. To execute a function you need parenthesis (). And most importantly, you need to return this otherwise the input variable will be undefined, and if you intend to do stuff inside your plugin with selectors containing multiple elements, you need to return this.each(function() { ... }) etc. as explained in the plugin authoring documentation from 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');

FIDDLE