Twitter Typeahead only seems works with elements called when the page loads (and not the dynamically created stuff made by methods like addWaypoint). How would I resolve this? Please find my code below:

$(document).ready(function () {
    // Add waypoints
    $('#add-waypoint-button').click(function () {
        var n = $('#waypoints input').length;

    // Address lookup

function addWaypoint(waypointCount)
    if(waypointCount < 4) {
        $('#waypoints-page #waypoints').append('<div class="waypoint-container"><input type="text" class="form-control booking waypoint" placeholder="Via"><label class="remove-waypoint-button" for=""><i class="fa fa-times"></i></label><hr></div>');
        if ($(window).height() <= 568) {
            else {

function addressLookup() {
    // Instantiate the Bloodhound suggestion engine
    var addressLookup = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 5,
        prefetch: {
            url: 'assets/data/countries.json',
            filter: function (list) {
                // Map the remote source JSON array to a JavaScript object array
                return $.map(list, function (addressLookup) {
                    return {
                        name: addressLookup
    // Initialize the Bloodhound suggestion engine
    // Instantiate the Typeahead UI
    $('.book-journey-container #pickup, .book-journey-container #destination, .waypoint-container .waypoint').typeahead(null, {
        name: 'addressLookup',
        displayKey: 'name',
        source: addressLookup.ttAdapter()
Member Avatar

Aha! Yes, faced same issue. This is my lame fix. Don't laugh, I'm a complete DIY disaster area when it comes to js/jq:

    var bestCustomers = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: '/customers/getcustomers/%QUERY',
        limit: 10


    //then I have a function to get the dynamic input - it may seem a little contrived here as it's part of a far bigger function. I'm cutting it down. i'm also using it as a glorified dropdown, getting the id value, hence the selected stuff aat the bottom.

    function showTypeahead()
               $('#remote .typeahead').typeahead({ minLength: 3}, {
                   name: 'best-customers',
                   displayKey: 'value',
                   source: bestCustomers.ttAdapter(),
                   templates: {
                       empty: [
                           '<div class="empty-message">',
                           'Unable to find any customers that match the current query',
               }).bind("typeahead:selected", function(obj, datum, name) {

I look at this now and it gives me a nosebleed. js/jq.