如何使用 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 调用新插入的输入字段:: (在第一行 - 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 这样的元素。追加元素后，从追加的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>

Fiddle demo