Keydown event is not working in IE and Chrome after dynamically clearing table row and adding new set of row to it !!! (Its working in Firefox)

Question

I am trying to implement navigation in array through arrow keys. I got is working by following code.

"onLoad": function () {
        $('#tbl tbody').attr("tabindex", 1);
        $('#tbl tbody').keydown(function (event) {
            // Code for navigation to next or previous in table
        });
    },

Key down event is working fine on page load, just i need to click on table once and i am able to navigate through arrow key. But I am facing problem after clearing table dynamically and adding new set of rows to it.At end of table i need to make call back to server which is clearing this table rows and adding new sets of row to is. now after that Keydown event is not working. I need to click on table again to navigate. Note: This is happening only on IE and Crome. On firefox it is working fine and i am able to navigate on new set of data or rows.

Answer 1

Bind it with jQuery's live function.

$('#tbl tbody').live('keydown', function(e) {});

This applies the callback to elements created at run time as well.

Documentation

Answer 2

It working for me now as suggested by jerome.s.

now what i am doing, i am setting focus when Ajax call complete and its call back function also done with its job to re-render table. when rendering part complete i have set focus to table body.

$('#tbl body').focus();

Thanks for your responses.