How do I use a class that has been added by the append in jquery

Question

HTML:

<input class="typeahead" id="jj" type="text">
<a href='#' id="a">add input</a>

i do append to add more inputs to html with class in the same class input in html JS:1:

$("#a").each(function() {
$(this).on("click", function(){
     $('#jj).append('<input class="typeahead" type="text"');
});});

this is do autocomplete for class JS:2:

var substringMatcher = function(strs) {
          return function findMatches(q, cb) {
          var matches, substringRegex;
          matches = [];
          substrRegex = new RegExp(q, 'i');
          $.each(strs, function(i, str) {
          if (substrRegex.test(str)) {
          matches.push(str);
          }
          });

          cb(matches);
          };
          };
         var mmm;
         $.post('arrays.php',{},function(data){
         mmm = data;
         },"json")
         .done(function() {
            $('.typeahead').each(function(){
            $(this).typeahead({
                  hint: true,
                  highlight: true,
                  minLength: 1
                  },
                  {
                  name: 'medicinses',
                  source: substringMatcher(mmm)
           });
     });
});

how do i use class "typeahead"?

Answer 1

Autocomplete do not support event delegation. You will need to attach the autocomplete to newly added element.

append will add the element at last position. You can target it using :last selector from collection of elements .ggg in #kkkk

$('button').click(function(){
 $('#kkkk').append("<input type='text' class='ggg'/>");
 $('#kkkk .ggg:last').autocomplete({
   //BIND SOURCE HERE
 });
});

Answer 2

 var mmm;
$.post('diagnoses.php',{},function(data){
              mmm = data;
    },"json")
    .done(function() {
                $('.ui-widget .auto').autocomplete({
                    source: mmm
                });
        });
$('#a').each(function(){
    $(this).click(function(){
    $('<input class="auto" type="text" placeholder="שם אבחנה">').appendTo('.ui-widget');
            $('.ui-widget .auto').autocomplete({
                 source: mmm
            });
    });
});