如何使用jQuery添加输入字段并将Ajax调用到新的输入字段中

How to add input field using jQuery and call Ajax into new input field

本文关键字：输入 字段 调用 Ajax 何使用 jQuery 添加      更新时间：2023-09-26

我正在使用带有输入字段的表格。我使用 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 调用新插入的输入字段：：（在第一行 - 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？提前谢谢。

使用类选择器，因为您没有元素具有 is auto-search-ac .附加元素后，从追加的tr中找到具有类的元素auto-search-ac并初始化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>

小提琴演示

相关文章：