Question

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

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

这是我的 html markup screenshot

我的jrap实现了boostrap-3-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

问题在于，当我通过单击上图中显示的“添加新行”按钮动态添加第二个控件时，动态添加的价格和数量输入控件不会获得新生成的值。相反，值显示在第一个已定义的行上。当我添加第3行以及更多时，会发生同样的事情。如果有人可以帮助我，我会很高兴我可以将下拉列表项目选中的值传递给正确或适当的输入。

Answer 1

您正在使用的HTML选择器似乎是一个ID选择器，每个文档应该是唯一的。这可以解释为什么会这样。

Answer 2

似乎值出现在第一个定义的行上，因为您只将它们的ID编码到typeaheadSettings.afterSelect（...）函数中：

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

您应该重构该功能，以便它可以使用其他自动生成的ID，例如#itemPrice1，#itemSubtotal2，...

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

2 个答案: