Question

I want to use the arrow keys to navigate between the input text fields in my form (next, previous). I found this simple method to implement it: link to it but for me it doesn’t work… I tried it in the HEAD and in the BODY after the FORM as well, but no luck…

I think the problem could be, that my form is send back to the page via AJAX…

I’m not that familiar with jQuery, can someone please help me out here?

This is the jQuery code:

<script>
$(document).ready(function(){
$('input').keyup(function(e){
if(e.which==39)
$(this).closest('td').next().find('input').focus();
else if(e.which==37)
$(this).closest('td').prev().find('input').focus();
else if(e.which==40)
$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
else if(e.which==38)
$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
});
});
</script>

Answer 1

if your inputs are dynamically created after domready event you should change

$('input').keyup(function(e){
   ...

into

$('body').on('keyup', 'input', function(e) {
   ...

doing so the keyup event will be captured on body element using event delegation

For further info see the documentation here: http://api.jquery.com/on/

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler…