jquery - Binding to the keydown event with jQuery on function

Question

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

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

I am not yet getting any alert out of .puzzlesquareinput. I am wondering how to bind to the keydown event of each .puzzlesquareinput.

Answer 1

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

---

your current code is working... make sure there are no javascript error... and/or wrap your code on $(document).ready... try checking the console...

here's a fiddle of your current code which is working http://jsfiddle.net/reigel/fcTqP/

Answer 2

You need to delegate event to parent of .puzzlesquareinput that is #gridpuzzleouter in your case. Ensure you included jquery successffully and bind event in document.ready.

Live Demo

Change to

jQuery("#gridpuzzleouter").on('keydown', '.puzzlesquareinput', function() {
         alert("keydown...");
});

Answer 3

jQuery(".puzzlesquareinput").on('keydown', '', function() {
                                           ^this is the selector, and you are
                                            selecting nothing

There is no point doing that unless you want it to apply to all .pzzlesquareinput you later created. Try this instead:

$(".puzzlesquareinput").keydown(function(){
    //...
});

<input class="puzzlesquareinput">

http://jsfiddle.net/DerekL/2cYYB/