如何使用jQuery添加輸入字段並將Ajax調用到新的輸入字段

Question

我正在使用帶輸入字段的表。我使用jQuery來添加新的行/輸入字段，然後我想將Ajax調用到新的行/輸入字段中。但它不工作。因爲它不是填補了document.ready()功能的條件..

這裏是我的HTML表單：

<table> 
<thead> 
<tr> 
    <th>Account Name:</th> 
    <th>Branch:</th> 
</tr> 
</thead> 
<tr> 
    <td> 
     <div> 
      <input type="text" name="ac_name" class="auto-search-ac"> 
     </div> 
    </td> 
    <td> 
     <div> 
      <input type="text" name="branch"> 
     </div> 
    </td> 
</table> 

腳本在表中添加新行（這是可以正常使用）：

<script> 
$(document).on("focus",'#table tr:last-child td:last-child',function() { 
     //append the new row here. 
     var table = $("#table"); 

     table.append('<tr>\ 
     <td style="width:250px;"><div> <input type="text" name="ac_name" class="auto-search-ac"></div>\ 
     </td>\ 
     <td><div><input type="text" name="branch"></div>\ 
     </td>\ 
     </tr>'); 
    }); 
    </script> 

Ajax調用到新的插入輸入字段::（在第一排 - 阿賈克斯工作很好）

<script type="text/javascript"> 

$(".auto-search-ac").autocomplete({ 
    source: "/ca-list", 
    minLength: 1, 
    select: function(event, ui) { 
     $('.auto-search-ac').val(ui.item.value); 
     $('#ca-id-val').val(ui.item.ca_id); 
    } 
}); 

</script> 

請注意::我在Modal中使用所有腳本和html。在第一行，一切都很好。

通過jQuery添加新行後，我不能調用ajax。可能它可能是document.ready()的問題。

問題：如何在html中使用jquery添加新的輸入字段/行後，如何調用任何腳本/ ajax/jQuery？先謝謝了。

Answer 1

使用類選擇器，因爲您沒有的元素爲auto-search-ac。附加元素後，發現有類元素作爲auto-search-ac在所附tr和初始化autocomplete

試試這個：

$(".auto-search-ac").autocomplete({ 
 
    source: "/ca-list", 
 
    minLength: 1, 
 
    select: function(event, ui) { 
 
    alert(ui.item.value); 
 
    alert(ui.item.ca_id); 
 
    } 
 
}); 
 

 

 
$(document).on("focus", '#table tr:last-child td:last-child', function() { 
 
    var table = $("#table"); 
 
    var element = '<tr>\ 
 
     <td style="width:250px;"><div> <input type="text" name="ac_name" class="auto-search-ac"></div>\ 
 
     </td>\ 
 
     <td><div><input type="text" name="branch"></div>\ 
 
     </td>\ 
 
     </tr>'; 
 
    table.append(element); 
 

 
    $("#table tr:last-child").find(".auto-search-ac").autocomplete({ 
 
    source: "/ca-list", 
 
    minLength: 1, 
 
    select: function(event, ui) { 
 
     alert(ui.item.value); 
 
     alert(ui.item.ca_id); 
 
    } 
 
    }); 
 
});

<table id='table'> 
 
    <thead> 
 
    <tr> 
 
     <th>Account Name:</th> 
 
     <th>Branch:</th> 
 
    </tr> 
 
    </thead> 
 
    <tr> 
 
    <td> 
 
     <div> 
 
     <input type="text" name="ac_name" class="auto-search-ac"> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div> 
 
     <input type="text" name="branch"> 
 
     </div> 
 
    </td> 
 
</table>

Fiddle demo