Twitter Typeahead not working with dynamically created elements

[methuselah90]

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;
        addWaypoint(n);
    });

    // Address lookup
    addressLookup();
});

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) {
                $('.form-control').removeClass('input-sm');
                $('.form-control').removeClass('input-lg'); 
                $('.form-control').addClass('input-sm');
            }
            else {
                $('.form-control').removeClass('input-sm');
                $('.form-control').removeClass('input-lg'); 
                $('.form-control').addClass('input-lg');
            }
        }
}

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
    addressLookup.initialize(); 
    // Instantiate the Typeahead UI
    $('.book-journey-container #pickup, .book-journey-container #destination, .waypoint-container .waypoint').typeahead(null, {
        name: 'addressLookup',
        displayKey: 'name',
        source: addressLookup.ttAdapter()
    });
}

[ShitLord]

Just banter m8

[diafol]

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:

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

    bestCustomers.initialize();

    //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()
    {
        $.get('/forms/frmCustomer')
            .done(function(data){
               $('#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',
                           '</div>'
                       ].join('\n')
                   }
               }).bind("typeahead:selected", function(obj, datum, name) {
                   getCustomerDetails(datum.id);
               });
          });
    }
    </script>    

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