Uncaught ReferenceError: function not defined (anonymous function)

Question

Bear with me... I'm not really a developer, so I'm sure I haven't gone about this in the best way to begin with, but I'm hoping we can work with what I've got to make it work properly...

I've got a combination of js and php that work together to flash pairs of images on the screen, and then capture the key presses for choosing the left or right image (using 'c' and 'm' or the left-arrow and 'right-arrow').

It seems to work fine on Safari, Firefox and IE, but is not working consistently in Chrome (sometimes it does, sometimes it doesn't).

I just looked at the inspector in Chrome while running it, and found that two of the functions weren't being found:

Uncaught ReferenceError: imgChoice is not defined (anonymous function)

Uncaught ReferenceError: stopChoice is not defined (anonymous function)

In my searching for an answer, the closest I got was that it might be that Chrome is processing the flashImages() function too quickly and isn't getting to the other two.

Is there a way I could fix this? Perhaps integrate the imgChoice and stopChoice functions into the flashImages function?

Here are the existing functions:

function imgChoice(imgPair)
{
    var imgDataR = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="r" />';
    var imgDataL = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="l" />';
    var noData = '<?php $noData = 1; ?>';
    $(document).keydown(function(event) {
        if (event.keyCode == 67 || event.keyCode == 37) {
            document.getElementById(imgPair+'Data').innerHTML = imgDataL;
            $(document).unbind('keydown');
            }
        if (event.keyCode == 77 || event.keyCode == 39) {
            document.getElementById(imgPair+'Data').innerHTML = imgDataR;
            $(document).unbind('keydown');
        }
    });
    //div = document.getElementById(imgPair);
}
function stopChoice(imgPair)
{
    $(document).unbind('keydown');
}
function flashImages()
{
i=500;
//$('#startTopic').fadeOut(500);
setTimeout("document.getElementById('fullpd').style.cursor='none';",50);
setTimeout("document.getElementById('fullpd').style.background='#464646';",500);

for(x=1;x<=imgPairs.length-1;x++)
    {
    setTimeout("document.getElementById('clickSound').play();",i+2000);
    setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="block";',i+3500)
    setTimeout('imgChoice("'+imgPairs[x]+'");',i+3495)
    setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="none";',i+4000)
    setTimeout('stopChoice("'+imgPairs[x]+'");',i+6000)
    i=i+4000;
    }
setTimeout("document.getElementById('fullpd').style.background='#eaeaea';",i+1000)
setTimeout("document.getElementById('fullpd').style.cursor='default';",i)
setTimeout(function() {$('#endTopic').fadeIn(1000);},i+1000);
}

Answer 1

Why don't you try delegating the events when you are binding the event handlers.. maybe that might help..

$(document).keydown(function(event) { Instead of this try

$(document).on('keydown' ,function(event) {