如何使用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