Twitter Typeahead doesn't work with input created dynamically

I'm using Twitter Typeahead to provide autocompletion for my text input.

When I create an input dynamically, .typeahead() doesn't display the hint UI unless it is called after the input control is attached to DOM.

This works:

var input1 = $('<input type="text" />');
$("#dynamic-container1").append(input1); /* (A) */
input1.typeahead(null, make_dataset());  /* (B) */
input1.focus();

This doesn't:

var input2 = $('<input type="text" />');
input2.typeahead(null, make_dataset());  /* (B) */
$("#dynamic-container2").append(input2); /* (A) */
input2.focus();

(Note order of lines marked (A) and (B).)

Why does it happen? Is there a correct way to initialize Typeahead before its input is appended to the DOM?

Here is a fiddle: http://ift.tt/1xOYfKg