jQuery自動完成動態創建的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 live方法，但我仍然陷入困境！

有什麼建議嗎？

Answer 1

使用下面的代碼片段，

從$('.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);