jQuery keydown event

Question

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

sqHTML = "<div id=\""+sqStringTemp+"\" class=\"puzzlesquare\"><input type=\"text\" class=\"puzzlesquareinput\" maxlength=\"1\" style=\"text-transform: uppercase;\" onkeypress=\"foo(event)\"/></div>";
jQuery("#gridpuzzleouter").append(sqHTML);

function foo(event) {
    //console.log(event.charCode);
    console.log( String.fromCharCode(event.charCode) );
}

//keydown event
jQuery(".puzzlesquareinput").on('keydown', function() {
    alert("keydown...");
});

I have a strange problem with the event not firing. The JavaScript function works fine and prints the key to the console. I am wondering why the jQuery for the keydown event is not firing. There are no errors in my console showing up. The jQuery works with jsFiddle but not on my development machine.

Thanks in advance...

Uncaught ReferenceError: sqStringTemp is not defined. Also, share the jsFiddle url. — Aditya Singh
– Aditya Singh, Commented Aug 22, 2013 at 5:06
The code is in context so those are excerpts not the full code which is very much longer. — Eae
– Eae, Commented Aug 22, 2013 at 5:51

Reigel Gallarde · Accepted Answer · 2013-08-22 05:14:04Z

1

if you have that on $(document).ready(), foo() would be undefined... try this instead...

change this code

function foo(event) {
        //console.log(event.charCode);
        console.log( String.fromCharCode(event.charCode) );
}

to something like this...

window.foo = function(event) {
    //console.log(event.charCode);
    console.log(String.fromCharCode(event.charCode));
}

answered Aug 22, 2013 at 5:14

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Praveen · Accepted Answer · 2013-08-22 05:20:23Z

0

It will work when you wrap it under jQuery(document).ready... method.

$(document).ready(function () {
    sqHTML = "<input type=\"text\" class=\"puzzlesquareinput\" maxlength=\"1\" style=\"text-transform: uppercase;\" onkeypress=\"foo(event)\"/>";
    jQuery("body").append(sqHTML);

    foo = function (event) {
        //console.log(event.charCode);
        console.log(String.fromCharCode(event.charCode));
    }

    //keydown event
    jQuery(".puzzlesquareinput").on('keydown', function () {
        alert("keydown...");
    });
});

Check this fiddle

edited Aug 22, 2013 at 5:20

answered Aug 22, 2013 at 5:11

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

2 Comments

Eae Over a year ago

I believe that is correct and I see the working fiddle however in my code it still does not fire for some reason I have not figured out yet...

Eae Over a year ago

I am wondering at this point if I should make my environment known which is Google Chrome browser on Windows 8.

Collectives™ on Stack Overflow

jQuery keydown event

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related