Javascript focus does not work on dynamically loaded input box

Question

I have a HTML markup in a template which has input element. I load it via Ajax call and put in existing html using jQuery's $(selector).html(response).

Basically it is a pop up box which loads from template. After loading pop up box I want to set focus on input box. I've written this code :

$("#prescribe-input").focus() after content is appended in existing HTML but it does not work. I tried doing it in traditional javascript way too document.getElementById("prescribe-input").focus()

Both do not work. For testing purpose I tried creating sample input box in Index.html of an app and set focus. it works perfectly. The problem is when I load html from template using $().html() it does not work.

Any way to focus it properly?

I know the code is very less here but the question is self explanatory I believe.

You have to include minimal example which replicates your issue, it's unclear what is your issue, could be many things — A. Wolff, Jul 01 '14 at 11:43
If the element existed and the selector was correct, setting the focus would work just fine on a dynamic element. — adeneo, Jul 01 '14 at 11:43

score 1 · Answer 1 · answered Jul 01 '14 at 11:30

1

You should do this in the callback function:

$(selector).html(response, function(){
   $("#prescribe-input").focus();
})

answered Jul 01 '14 at 11:30

Jai

74,255
12
74
103

1

Why would that matter, `html()` is synchronous ? – adeneo Jul 01 '14 at 11:31
may be OP is putting focus before content is appened. – Jai Jul 01 '14 at 11:32
The OP probably is, but using a callback for a synchronous method won't really help ? – adeneo Jul 01 '14 at 11:33
1

i just read it again i think there is id duplicacy. another elem with same `id` most probably available in there. – Jai Jul 01 '14 at 11:37
There is no other ID as the same element. I made sure that the focusing logic is called only after appending HTML element. – Rahul Patil Jul 01 '14 at 14:15

score 1 · Accepted Answer · answered Jul 01 '14 at 11:35

1

if you are using jquery then you can use .on() on dynamically generated elements

$("#prescribe-input").on( "focus", function() {
  //do what ever you want
});

answered Jul 01 '14 at 11:35

silk_route11

324
3
17

How on earth would a delegated event handler work with ***setting*** the focus to an element ? – adeneo Jul 01 '14 at 11:41
and anyway, you aren't delegating event here – A. Wolff Jul 01 '14 at 11:42

Javascript focus does not work on dynamically loaded input box

2 Answers2

Linked