$(document).ready(function(){
    $(document).bind('keydown',function(e){
        key  = e.keyCode;
        if(key == 37){
            left();
        }else if(key == 38){
            up();
        }else if(key == 39){
            right();
        }else if(key == 40){
            down();
        }
    });
            alert("Hi");
});

"Hi" only alerts once how can i break out of a $(document).bind after its started? Something like break; or return; maybe?

$(document).ready(function(){
    $(document).bind('keydown',function(e){
        key  = e.keyCode;
        if(key == 37){
            left();
        }else if(key == 38){
            up();
        }else if(key == 39){
            right();
        }else if(key == 40){
            down();
        }
    });
            alert("Hi");
});

"Hi" only alerts once how can i break out of a $(document).bind after its started? Something like break; or return; maybe?

• javascript
• jquery
• html
• keyboard

• Why are you expecting it to alert more than once? It will alert one time when the DOM is ready, that's it. It has nothing to do with the keydown event. – elclanrs Commented Feb 21, 2013 at 4:18
• I don't understand your question. Both break and return are valid javascript mands. – Barney Commented Feb 21, 2013 at 4:18
• What are you trying to do? "hi" alerts once because $(document).ready() fires once when the document dom is loaded and ready. Maybe you wanted to put the alert inside the keydown event handler? – dlock Commented Feb 21, 2013 at 4:21
• You can exit a function at any time with a return statement. You can exit a loop with a break statement. – jahroy Commented Feb 21, 2013 at 4:22

2 Answers 2

"Hi" only alerts once because it is not within the keydown handler... it's within the ready handler.

$(document).ready(function(){
    $(document).bind('keydown',function(e){
        key  = e.keyCode;
        if(key == 37){
            left();
        }else if(key == 38){
            up();
        }else if(key == 39){
            right();
        }else if(key == 40){
            down();
        }
    });// keydown handler ends here
            alert("Hi");
});

Also as a side note, try using the console methods instead of alert(), as it can be more descriptive and it's non-blocking.

UPDATE

I can see from the below ments you're quite confused as to what's actually happening in your code... So let's step through it.

$(document).ready(function(){

Here you're binding a handler to the DOM ready event. This gets fired when the browser has finished building the document structure. It doesn't take in to consideration any external assets that need to be loaded.

$(document).bind('keydown', function(e){

Now we're binding a handler to the keydown event. Anything within the function (and only within the function) will be executed when the keydown event bubbles up to document level.

key = e.keyCode;

You assign the keyCode property of the event to a key variable. I suggest preceeding it with the keyword var, to maintain scope. var key = e.keyCode;

if(key == 37){
    left();
}else if(key == 38){
    up();
}else if(key == 39){
    right();
}else if(key == 40){
     down();
}

Now you're jumping through a series of if/else blocks, and calling left, up, right and down functions if the previously declared key variable matches one of your conditions.

});

This is the END of the keydown handler.

alert("Hi");

Here you alert() a message. This is done straight after the keydown handler is BOUND, but NOT after each or any execution of said handler. This line is executed ONCE, as part of the document ready handler.

});

This is the end of the document ready handler.

I think, you dont want to use keydown for more than once.

You can either use on and off() like,

$(document).ready(function(){
    $(document).on('keydown',function(e){
        key  = e.keyCode;
        if(key == 37){
            left();
        }else if(key == 38){
            up();
        }else if(key == 39){
            right();
        }else if(key == 40){
            down();
        }
        $(document).off('keydown'); 
    });// keydown handler ends here
            alert("Hi");
});

Or you can use one() which fires only once.

$(document).ready(function(){
        $(document).one('keydown',function(e){
            key  = e.keyCode;
            if(key == 37){
                left();
            }else if(key == 38){
                up();
            }else if(key == 39){
                right();
            }else if(key == 40){
                down();
            }  
        });// keydown handler ends here
                alert("Hi");
    });