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