jQuery autocomplete для динамически создаваемых входов для вызова ajax

Question

У меня возникла проблема с использованием автозаполнения jQuery с динамически создаваемыми входами (снова созданным с помощью jQuery). Я не могу получить автозаполнение для привязки к новым входам.

<script type="text/javascript"> 

     window.count = 0; 
     if (!window.console) console = {log: function() {}}; 

     var autocomp_opt = { 
       width: 300, 
       max: 10, 
       delay: 100, 
       minLength: 1, 
       autoFocus: true, 
       cacheLength: 1, 
       scroll: true, 
       highlight: false, 
       source: function(request, response) { 
        $.ajax({ 
         url: "/test/JSON/PACS8Data", 
         dataType: "json", 
         data: request, 
         success: function(data, textStatus, jqXHR) { 
          console.log(data); 
          var items = data; 
          response(items); 
         }, 
         error: function(jqXHR, textStatus, errorThrown){ 
          console.log(textStatus); 
         } 
        }); 
       }, 
      }; 



      function addme() { 
       window.count++; 
       var text = $("#hiddenDiv").html(); 

       text = replaceAll("XXYY", ""+window.count, text); 
       $("#appendText").append(text); 
       $('.description', text).autocomplete(autocomp_opt); 

      } 

      function replaceAll(find, replace, str) { 
        return str.replace(new RegExp(find, 'g'), replace); 
      } 


    </script> 


     <br /> 

     <div id="jsftextAjax" > 
      <table> 
       <tr> 
        <td> 
         <input id="autoText0" class="description" maxlength="20" /> 
        </td> 
        <td> 
         <input id="valueText0" maxlength="20" /> 
        </td> 
        <td> 
         <button id="add0" type="button" onclick="addme();">Add</button> 
        </td> 
       </tr> 
      </table> 
     </div> 
     <div id="appendText"> 

     </div> 
     <div id="hiddenDiv" style="display:none;" > 
      <table> 
       <tr> 
        <td> 
         <input id="autoTextXXYY" class="description" maxlength="20" /> 
        </td> 
        <td> 
         <input id="valueTextXXYY" maxlength="20" /> 
        </td> 
        <td> 
         <button id="addXXYY" type="button" onclick="addme();">Add</button> 
        </td> 
       </tr> 
      </table> 
     </div> 

Я понимаю, что проблема связана с содержанием создается после загрузки страницы, но я не могу понять, как получить вокруг него. Я прочитал несколько связанных вопросов и наткнулся на живой метод jQuery, но я все еще в пробке!

Любые советы?

Answer 1

Используйте следующий фрагмент кода,

text Удалить из $('.description').autocomplete(autocomp_opt);

function addme() { 
    window.count++; 
    var text = $("#hiddenDiv").html(); 

    text = replaceAll("XXYY", ""+window.count, text); 
    $("#appendText").append(text); 
    $('.description').autocomplete(autocomp_opt); 

} 

Working Demo

Примечание:

autocomplete() код не будет работать на 1-й набор текстового поля. для этого включают $('.description').autocomplete(autocomp_opt); в вашем $(document).ready(...)

Answer 2

$('.description', text).autocomplete(autocomp_opt); <-- You are looking at a string text as the context 

Необходимо добавить элементы, которые были добавлены.

$("#appendText") 
    .append(text) 
    .find('.description') 
     .autocomplete(autocomp_opt); 

или

var elems = $(text); 
$("#appendText").append(elems); 
elems.find('.description').autocomplete(autocomp_opt);