javascript - 使用 JQuery 根据 bootstrap-3-typeahead 下拉列表将值传递给多个动态创建的控件

Question

我正在使用 Laravel、JQuery 和 Bootstrap-3-typeahead 创建一个发票系统，并创建了一个按钮，该按钮可以在使用 JQuery 选择列表项时在每个表数据中动态添加带有文本输入的新表行。每行中的第一个文本输入具有 bootstrap-3-typeahead 功能:选择这样的项目后 creating invoice教程。

从自动完成文本输入下拉列表中选择后，它会自动填充价格、数量，并使用以下使用 JQuery 和 Ajax GET 方法的 Typeahead(afterSelect 方法)实现为输入的数量分配默认值“1”。

这是我的 html markup screenshot .

我的 boostrap-3-typeahead 的 JQuery 实现，以及根据 typeahead 下拉列表中所选项目生成自动价格、数量和总值。

var typeaheadSettings = {
  source: function (query, process) {
    return $.get(url, { query: query }, function (data) {
      console.log(data)
      return process(data);
    });
  },
  afterSelect: function (data) {
    console.log(data.sellPrice);          

    $('#itemPrice').val(data.sellPrice);
    $('#itemQuantity').val('1');
    var price = $('#itemPrice').val();
    var quantity = $('#itemQuantity').val();
    var subtotal = price * quantity;
    $('#itemSubtotal').val(subtotal);
  }
};

点击按钮添加新行的 JS 代码:

// Add Row
$(document).on('click', '#btnAddRow', function(event) {
  var i=$('#invoiceTable tbody tr').size();
  html = '<tr>';
  html += '<td><p class="text-center pt-xs"><input type="radio" name="sn" id="sn" value=""></p></td>';
  html += '<td><input type="text" name="productName[]" id="itemName'+ i +'" class="form-control typeahead twitter-typeahead" placeholder="Item name" autocomplete="off" data-fit-to-element="true" data-provide="typeahead"></td>';
  html += '<td><input type="text" name="price[]" id="itemPrice'+i+'" class="form-control text-right" placeholder="Item price" autocomplete="off" readonly></td>';
  html += '<td><input type="number" name="quantity[]" id="itemQuantity'+ i +'" class="form-control text-right" placeholder="Quantity"></td>';
  html += '<td><input type="text" name="subtotal[]" id="itemSubtotal'+ i +'" class="form-control text-right" placeholder="Subtotal" readonly></td>';
  html += '<td class="actions-hover actions-fade text-center"><p><a id="btnDelRow"><i class="fa fa-minus-circle fa-lg text-warning" id="iconDelRow"></i></a></p></td>';
  html += '</tr>';

  $('#invoiceTable tbody').append(html);
  i++;
  $('.typeahead').trigger('added');
});

这就是动态添加行的标记的样子，ID 后缀为整数“1,2”。如果动态添加另一行，则整数会递增，从而为所有重复控件提供唯一的 ID。 dynamically added tr screenshot

问题是，当我通过单击上图所示的“添加新行”按钮动态添加第二个控件时，动态添加的价格和数量输入控件无法获取新生成的值。相反，这些值出现在第一个已定义的行上。当我添加第三行及更多行时，也会发生同样的事情。 如果有人可以帮助我找到一种方法，我可以将选择下拉列表项后生成的值传递给右侧或适当的输入，我会很高兴。

Answer 1

您使用的 HTML 选择器似乎是一个 ID 选择器，每个文档应该是唯一的。这可以解释为什么会发生这种情况。