Javascript Removing jQuery events and getting user input

Question

I have a problem with the javascript code I am trying to work with. I am trying to call a function to set an event handler and within that event handler also remove it when the event is called. In this particular instance I am trying to ADD an event handler whenever I want input, then a callback is passed to the function and the code is run when the input is ready. Also at this stage I try to remove it so the callback doesn't get triggered more than once, but there seems to be a problem with this. Here is the code:

    this.validateInput = function(NaN, callback) {

    // Wait for the user to click submit or press
    // enter, then if the input is a valid number
    // return true. If it is not valid return false
    $(document).keydown(function(e) {

        // If the enter key is pressed, if the box is focused and if
        if (e.which == 13 && $("#inputBox").is(":focus")) {

            // Print the user's input regardless of whether it is a
            // number or not.
            var newOutput = $("#inputBox").val()
            $("#output").append(newOutput + "<br>");
            // If the user wants the input to be a number then
            // the program checks if the input is not numerical.
            if (NaN && !isNaN($("#inputBox").val())) {

                // Get input from screen
                var newInput = $("#inputBox").val();

                // Remove this handler
                this.removeKeyhandler();

                // Call the code passed to the function
                callback(newInput);

                // Return from the function.
                return;

            // This checks if the user wants non-number input
            // and runs the following code IF the input is not numerical
            } else if (!NaN && isNaN($("#inputBox").val())) {

                // Get input from screen
                var newInput = $("#inputBox").val();

                // Remove this handler
                this.removeKeyhandler();

                // Call the code passed to the function
                callback(newInput);

                // Return from the function
                return;
            }
        }
    });


}

For reference, #inputBox is an input box, #output is the <div> I am trying to output to, and removeKeyHandler() simply contains the code $(document).off("keydown", document);. If you want to see the full file/project, it is here.

The only thing that seems not to be working is the event handler not removing, it keeps going as many times as you add input. If you download the project and open up index.html you should see what I mean.

Answer 1

I see your problem.. your 'this' you refer to in your code is not in the right scope..

simply do this:

function display() {
    var ref = this;

}

Now replace these:

this.removeKeyhandler();

with this:

ref.removeKeyhandler();

Also in your removing function change it to this:

$(document).off("keydown");

good luck!