CODEWITHSUNDEEP
jquery
Omer Cohen
Omer Cohen

Reputation: 141

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

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"?

Upvotes: 0

Views: 42

Answers (2)

Omer Cohen
Omer Cohen

Reputation: 141

 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
            });
    });
});

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

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
 });
});

Upvotes: 1

Related Questions