Question

I’m trying to determine why something like this doesn’t work:

$('a').focus( function() {
  $(this).click(); 
});

Background:

I’m trying to create a form in which tabbing to various elements (e.g. textboxes, etc.) will trigger links to anchors in a div, so that relevant text is scrolled into view as the form is being filled out.

Is there a better way to do this?

Answer 1

 $('yourInput').on('focus', function(){
      $('yourAnchor').trigger('click');
 });

should work just fine, however you are likely to loose focus on the input field as the new element has been ‘clicked’. I would recommend using the jQuery scrollTo plugin instead. That would enable you to do something like this:

 $('yourInput').on('focus', function(){
       $('messageArea').scrollTo('yourAnchor');
 });

This was scrolling occurs in a nice animated fashion and without triggering browser events.

Part of the reason the code you posted may be failing is that, 1. anchors do not always have a focus event, 2. clicking it right after focusing may be redundant and not causing the change you are looking for.