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。在追加元素后，从附加的auto-search-ac中找到具有tr类的元素并初始化autocomplete

试试这个：

＆＃13;

$(".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);
    }
  });
});

＆＃13;

<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>

＆＃13;

Fiddle demo

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

1 个答案: