Jquery bind not working while within a javascript recursive loop

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();
randTime=Math.floor(Math.random()*1001)+1500;

playSound();
flash();
}

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) {
            main();
        }
    } , 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 {
        getZone();
    }
}
}

function keyPress(e) {
var evtobj=window.event? event : e //distinguish between IE's explicit event object (window.event) and Firefox's implicit.
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();
    alert(1);
    //keypressed[condition][zone]['k']=actualkey;
    //keypressed[condition][zone]['t']=(reat-preDs);
}
}

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.

Regards

Using a jquery sound plugin was the answer.

Fixed it with this : plugins.jquery.com/project/sound_plugin