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

Question

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?

It works just fine in this [fiddle](http://jsfiddle.net/KN6rs/) - click the show text to show the input and set focus to it. — Christofer Eliasson, Feb 17 '12 at 12:09
Thanks Christofer - I found the issue, a mistake in wrong ids! :/ — DaFoot, Feb 17 '12 at 12:11

score 6 · Accepted Answer · answered Jul 27 '12 at 10:29

6

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

answered Jul 27 '12 at 10:29

DaFoot

1,475
8
29
58

Mohammad Ayoub Khan · Answer 2 · 2018-07-20T22:02:00.600

6

// Variable to store element
var btn = document.querySelector( ".btn-primary");

// Click Event
$(btn).click(function() {

  // Jquery to define which element will get focus
  $(".form-control").focus();

});

edited Jul 20 '18 at 22:02

answered Jul 19 '18 at 15:53

Mohammad Ayoub Khan

2,422
19
24

2

While this code may answer the question, it is better to include the essential parts of the answer here and provide the code for reference. – Busti Jul 19 '18 at 16:14

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

2 Answers2