[jQuery] focus and blur events
I have a table with one column. each cell contains a textbox. I want
the user to be able to use the cursor keys to move up or down the
cells. On the keyup I detect when the up key is pressed
(event.keyCode==38) and navigate to the previous cell and call focus()
on it. I am tracing the events to see what is fired and am getting
confusing results.
1. If i click cell1, cell1.focus fires. If i now click cell2,
cell1.blur fires and cell2.focus fires. This is what i expect.
2. if i click cell1, cell1.focus fires. If i now press the down key,
the cell2.focus fires, then cell1.blur then cell2.focus - cell2.focus
fires twice. I expect the blur to fire first and then the focus to
fire. what am i missing?
below my code:
$('.editCell').focus(function () {
$(this).addClass('highLight').select();
}).blur(function() {
$(this).removeCalss("highLight");
}.keyup(function(event) {
if (event.keyCode == 38) // up key
$(this).parent().parent().prev().find(".editCell").focus();
if (event.keyCode == 40) // down key
$(this).parent().parent().next().find(".editCell").focus();
});
any help appreciated...
thanks