動態創建的輸入上的自動完成

Question

任何人都可以幫助我解釋爲什麼自動完成不適用於動態創建的輸入？有沒有辦法用我的代碼做到這一點？我的html中有jQuery的cdn鏈接。

的Javascript

var countries = ["Canada","Africa","Japan"]; 

    function add_row() 
    { 
     $rowno=jQuery("#employee_table tr").length; 
     $rowno=$rowno+1; 


    jQuery("#employee_table tr:last").after(
     "<tr id='row"+$rowno+"'>"+ 
      "<td><input type='text' pattern='[A-Za-z\\s]+' name='fullname[]' placeholder='Full Name' required></td>"+ 
      "<td><input type='text' id='listcountry' pattern='[A-Za-z\\s]+' name='country[]' placeholder='Country' required></td>"+ 
      "<td><input type='file' name='resume[]' placeholder='Resume'></td>"+ 

         "<td><input list='degree' name='degree'>"+ 
         "<datalist id='degree'>"+ 
         "<option value='High School'>"+ 
         "<option value='Undergraduate'>"+ 
         "<option value='Master'>"+ 
         "<option value='PHD'>"+ 
         "</datalist></td>"+ 

      "<td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td>"+ 
     "</tr>"); 

    jQuery("#listcountry").autocomplete({ 
     source: countries 
     }); 
} 

我已經加入我下面的HTML代碼。
HTML

<div id="wrapper"> 
    <div id="form_div"> 
    <form enctype="multipart/form-data" method="post" name="registration" id="newquizform"> 
    <center> 
     <table id="employee_table" align=center> 
     <tr id="row1"> 
     <td><input type="text" pattern="[A-Za-z\s]+" title="Digit Prohibited" name="fullname[]" placeholder="Full Name" required></td> 
     <td><input id="listcountry" type="text" pattern="[A-Za-z\s]+" title="Digit Prohibited" name="country[]" placeholder="Country" required></td> 
     <td><input type="file" name="resume[]" placeholder="Resume"></td> 
     <td>  
       <input list="degree" name="degree"> 
       <datalist id="degree"> 
       <option value="High School"> 
       <option value="Undergraduate"> 
       <option value="Master"> 
       <option value="PHD"> 
       </datalist> 
     </td> 
     </tr> 
     </table> 
     </center><br> 

     <input type="button" onclick="add_row();" value="ADD ROW"> 
     <input type="submit" name="submitbutton" value="SUBMIT" id="submitbutton"> 
    </form> 
    </div> 
</div> 

Answer 1

取代ID與在這樣輸入元件類，它應該工作。並且不要忘記第一個的初始化。

var countries = ["Canada","Africa","Japan"]; 
 
jQuery(".listcountry").autocomplete({ 
 
     source: countries 
 
     }); 
 

 
    function add_row() 
 
    { 
 
     $rowno=jQuery("#employee_table tr").length; 
 
     $rowno=$rowno+1; 
 

 

 
    jQuery("#employee_table tr:last").after(
 
     "<tr id='row"+$rowno+"'>"+ 
 
      "<td><input type='text' pattern='[A-Za-z\\s]+' name='fullname[]' placeholder='Full Name' required></td>"+ 
 
      "<td><input type='text' class='listcountry' pattern='[A-Za-z\\s]+' name='country[]' placeholder='Country' required></td>"+ 
 
      "<td><input type='file' name='resume[]' placeholder='Resume'></td>"+ 
 

 
         "<td><input list='degree' name='degree'>"+ 
 
         "<datalist id='degree'>"+ 
 
         "<option value='High School'>"+ 
 
         "<option value='Undergraduate'>"+ 
 
         "<option value='Master'>"+ 
 
         "<option value='PHD'>"+ 
 
         "</datalist></td>"+ 
 

 
      "<td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td>"+ 
 
     "</tr>"); 
 

 
    jQuery(".listcountry").autocomplete({ 
 
     source: countries 
 
     }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="wrapper"> 
 
    <div id="form_div"> 
 
    <form enctype="multipart/form-data" method="post" name="registration" id="newquizform"> 
 
    <center> 
 
     <table id="employee_table" align=center> 
 
     <tr id="row1"> 
 
     <td><input type="text" pattern="[A-Za-z\s]+" title="Digit Prohibited" name="fullname[]" placeholder="Full Name" required></td> 
 
     <td><input class="listcountry" type="text" pattern="[A-Za-z\s]+" title="Digit Prohibited" name="country[]" placeholder="Country" required></td> 
 
     <td><input type="file" name="resume[]" placeholder="Resume"></td> 
 
     <td>  
 
       <input list="degree" name="degree"> 
 
       <datalist id="degree"> 
 
       <option value="High School"> 
 
       <option value="Undergraduate"> 
 
       <option value="Master"> 
 
       <option value="PHD"> 
 
       </datalist> 
 
     </td> 
 
     </tr> 
 
     </table> 
 
     </center><br> 
 

 
     <input type="button" onclick="add_row();" value="ADD ROW"> 
 
     <input type="submit" name="submitbutton" value="SUBMIT" id="submitbutton"> 
 
    </form> 
 
    </div> 
 
</div>