I'm trying to bind a keypress event handler to the input element in the last cell of a table row. In the real application this will be used to check for a tab key and call a function to add another row to the table. I have it working in FF but apparently the keypress event never gets bound in IE 6 or 7. I've created a small table and some simple code to target the desired element and attempt to add the bound function. I've been messing with this for a while so I'm suspecting that I've developed "code blindness", you know what I mean, when one couldn't spot an obvious error if it was in bold italics. I think I've stripped it to the bare essentials but I can't, for the life of me, even get the alert to fire. I've attached the code below and would greatly appreciate someone taking a look, because I'm obviously missing something.
Thanks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { var table = document.getElementById("test"); var rows = table.getElementsByTagName("tbody") [0].getElementsByTagName("tr"); for (var rowNum = 0; rowNum <= 2; ++rowNum) { var cells = rows[rowNum].getElementsByTagName("td"); var currentTarget = cells[cells.length - 1].firstChild; $(currentTarget).one("keypress", {type: "debug"}, function(event) { alert(event.data.type + " : " + event.keyCode); }); } }); </script> <title>IE Bind() Test</title> </head> <body> <form id="form1" name="form1" method="post" action="whatever"> <table id="test" border="1"> <thead> <tr> <th>Heading</th> <th>Heading</th> <th>Heading</th> <th>Heading</th> <th>Heading</th> </tr> </thead> <tbody> <tr> <td>Some crap here</td> <td>Some crap here</td> <td>Some crap here</td> <td>Some crap here</td> <td><input name="textfield0" type="text" id="textfield0" /></td> </tr> <tr> <td>Some more crap here</td> <td>Some more crap here</td> <td>Some more crap here</td> <td>Some more crap here</td> <td><input name="textfield1" type="text" id="textfield1" /></td> </tr> <tr> <td>Even more crap here</td> <td>Even more crap here</td> <td>Even more crap here</td> <td>Even more crap here</td> <td><input name="textfield2" type="text" id="textfield2" /></td> </tr> </tbody> </table> </form> </body> </html>
