Add a listener to an element that is dynamically added

Question

I have a javascript/jQuery page where I\'m using Twitter Bootstrap\'s typeahead. There are two separate places in the javascript where I add elements that I would like to be ty

Answer 1

the most simplest way, that will work for typeahead, datepicker etc

First you need to understand how you are adding input elements that you want to apply bootstrap typeahead

to add elements try to achieve something like below:

 //add this in your add button click handler
 $tinput = $('<input type="text" name="bootstrap" class="typeahead"/>');

 //apply bootstrap typeahead
 $tinput.typeahead();

this way it will work, I thought sharing here would help others :)

Answer 2

You can use jQuery delegation to do that. For example:

$("#element-that-will-contain-typeaheads").on("DOMNodeInserted", function () {
    $(this).find(".typeahead").typeahead();
});