Take the 2-minute tour ×

I am writing a piece of code that changes some lights on a screen from red to green randomly and waits for the user to hit the key that corresponds to the light lit.

When I run this code you are able to hit the a,d,j or l key and an alert will pop up. However, as soon as I click the start button no keys are recognised. And when the loop has finished the bind still seems to become disabled. I have tried moving the bind to other places but I have had no joy. Your help is much appreciated.

$( function() {
$('#start').bind('click', function() { main(); });
$(document).bind('keypress', function(e) { keyPress(e); } );
} );

function getRand(val) {
   return Math.floor(Math.random()*val)+1;

function main() {

preD = new Date;
preDs = preD.getTime();


function flash() {

zone = getZone();

setTimeout(function() {
    $('#r'+zone).css("background-image", "url(images/rea_grn.jpg)");
    setTimeout(function() { 
        $('#r'+zone).css("background-image", "url(images/rea_red.jpg)");
        if(cond[1] < 8) {
    } , 200);
} , randTime);

function getZone() {

if(condition==1) {
    zone = getRand(2);
    if( test[1][zone] < 8 ) {
        test[1][zone] += 1;
        cond[1] += 1;
        return zone;
    } else {

function keyPress(e) {
var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode
var actualkey=String.fromCharCode(unicode)
if (actualkey=="a" || actualkey=="d" || actualkey=="j" || actualkey=="l" ) {
    dd = new Date;
    reat = dd.getTime();
share|improve this question
Have you put some sort of debugging code at the beginning of keyPress to make sure it isn't being called at all and that the fault is in the event handler binding? –  justkt May 3 '11 at 17:32
Could you possibly give us a working example, or at least a stripped down jsfiddle that illustrates the issue? It would be really useful to see it in action. –  James Montagne May 3 '11 at 17:40

1 Answer 1

The reason that this could be happening is, when you generate code dynamically or alter any existing code the bind needs to be done again, because the function to bind just runs once and only for the members already created. So when you create dynamically code, you are forced to run the binding function to recognize the new elements.

this ways is not very recommended, instead of this, you could bind a container like 'div' or something and inside of this validate which element is calling you. This will work because your container is created once and the binding is properly assigned and doesn't matter if the content of your container changes, the binding always work.


share|improve this answer
When I run the code the keypress works, but not during the running of the code. It works again afterwards, but only if I switch out of and then back into the window. I will get a working example up tomorrow. –  karmafunk May 3 '11 at 21:06
I have tried putting the bind within the loop and binding to window, html,etc. as well but no joy. –  karmafunk May 3 '11 at 21:13
I think I may have found the the thing that is causing it. Before each flash it plays a sound, I have removed this and it now takes the key press. Any idea why the sound is having an effect on it. Look here: performancetrainingdiary.com/reaction_test.html –  karmafunk May 4 '11 at 7:20
Fixed it with this : plugins.jquery.com/project/sound_plugin –  karmafunk May 4 '11 at 16:00

Your Answer


