[jQuery] Having difficulty binding keypress handler in IE 6 & 7
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>