自動追加機能が追加で動作しない

Question

私はjquery autosuggestを使用しています。 新しい入力フィールドを追加しようとすると、入力テキストボックスが追加されますが、autosuggestでは機能しません。 どこが間違っているのか分かりませんが、エラーは発生しません。 自動追加機能を追加して動作させるにはどうすればよいですか？

<td><button class="add_field_button4">Add </button> </td> 
<div class="input_fields_wrap6"> 
     <input type="text" class="pets" value="#myArray[listCount]#"/> 
     <a class="remove_field">Remove</a> 
</div> 
<div class="input_fields_wrap3"> 

</div> 


<script type="text/javascript"> 

    $(document).ready(function() { 
    var max_fields3  = 30; //maximum input boxes allowed 
    var wrapper3   = $(".input_fields_wrap3"); //Fields wrapper 
    var add_button3  = $(".add_field_button3"); //Add button ID 
    var wrapper6   = $(".input_fields_wrap6"); //Fields wrapper 
    var x = 1; //initlal text box count 
    $(add_button3).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields3){ //max input box allowed 
      x++; //text box increment 
      $(wrapper3).append('<div><input type="text" class="pets" name="mytext[]" ><a href="#" class="remove_field">Removes</a></div>'); //add input box 


     } 
    }); 


    $(document).ready(function() { 
     $('.pets').autocomplete({ 
      source: function(query, response) { 
       $.ajax({ 
        url: "search.cfc?method=queryNames&returnformat=json", 
        dataType: "json", 
        data: { 
         searchPhrase: query.term 
        }, 
        success: function(result) { 
         response(result); 
        } 
       }); 
      } 
     }); 
    }); 
</script> 

Answer 1

試してみてください。

<script type="text/javascript"> 

$(document).ready(function() { 
var max_fields3  = 30; //maximum input boxes allowed 
var wrapper3   = $(".input_fields_wrap3"); //Fields wrapper 
var add_button3  = $(".add_field_button3"); //Add button ID 
var wrapper6   = $(".input_fields_wrap6"); //Fields wrapper 
var x = 1; //initlal text box count 
$(add_button3).click(function(e){ //on add input button click 
    e.preventDefault(); 
    if(x < max_fields3){ //max input box allowed 
     x++; //text box increment 
     $(wrapper3).append('<div><input type="text" class="pets" name="mytext[]" ><a href="#" class="remove_field">Removes</a></div>'); //add input box 


    } 

    $('.pets').autocomplete({ 
     source: function(query, response) { 
      $.ajax({ 
       url: "search.cfc?method=queryNames&returnformat=json", 
       dataType: "json", 
       data: { 
        searchPhrase: query.term 
       }, 
       success: function(result) { 
        response(result); 
       } 
      }); 
     } 
    }); 
}); 
</script>