How to set focus using jQuery on an element that has just appeared

jquery focus show setfocus
DaFoot picture DaFoot · Feb 17, 2012 · Viewed 52.9k times · Source

I have a document ready block as follows:

$(document).ready(function () {
    $('#addTagLink').click(function () {
        $('#addTagField').show();
        $('#addTagField').val("");
        $('#addTagField').focus();
    });
});

The addTagField is a regular text input that has display:none set by css on page load.

When a user clicks on the addTagLink element the input field is shown correctly but focus doesn't get set to the field as intended.

I figured it must be something to do with the display:none / show() functionality, so changed the $('#addTagField').focus(); to another field $('#name').focus();which worked perfectly.

Can anyone suggest firstly why I see this issue and secondly, how to fix it?

Answer

DaFoot picture DaFoot · Jul 27, 2012

Turns out it was a problem with my element IDs. Oops.

Related questions

How to focus on a form input text field on page load using jQuery?

This is probably very simple, but could somebody tell me how to get the cursor blinking on a text box on page load?

Read More
jQuery lose focus event

I'm trying to show up a container if a input field gets the focus and - that's the actual problem - hide the container if focus is lost. Is there an opposite event for jQuery's focus? Some example code: <…

Read More
How to remove focus from input field in jQuery?

I am setting the focus on a certain input field when loading a page using the following line: $('#myInputID').focus(); Is there a way that I can undo or remove this focus when hovering over a certain element? (The …

Read More