动态添加多个输入

Question

我有一个包含 2 个输入的表单，当用户从 datalist 中选择 description 时，第二个输入将填充 product。它工作正常 -> bootbly1

现在我想在表单中添加动态输入。输入插入正常，但上述功能不适用于新输入..

这是最后的bootbly

<div class="container">
  <div class="row">
            <div class="col-lg-12 col-xs-12">
            <form id="bookForm" action="#" method="post" class="form-horizontal">
            <div class="form-group">
                <div class="col-xs-4">
                    <input class="form-control" name="description-0" id="ajax" list="json-datalist" placeholder="Description" type="text">
                    <datalist id="json-datalist"></datalist>

                </div>
                <div class="col-xs-2" style="width: 160px;">
                    <input class="form-control" name="product-0" placeholder="product" type="text">
                </div>

                 <div class="col-xs-1">
                    <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
                </div>
            </div>   

            <!-- The template for adding new field -->
            <div class="form-group hide" id="bookTemplate">
                 <div class="col-xs-4">
                    <input class="form-control" name="description" id="ajax" list="json-datalist" placeholder="description" type="text">
                    <datalist id="json-datalist"></datalist>

                </div>
                <div class="col-xs-2" style="width: 160px;">
                    <input class="form-control" name="product" placeholder="product" type="text">
                </div>


                <div class="col-xs-1">
                    <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
                </div>
            </div>

            <div class="form-group">
                <div class="col-xs-5 col-xs-offset-1">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </div>
        </form>


            </div>
        </div>
  </div>

和javascript

var counter = 0;    
var dataList = document.getElementById('json-datalist');

    var jsonOptions = [{
                        "product": "11111",
                        "description": "description 1"
                      }, {
                        "product": "22222",
                        "description": "description 2"
                      }, {
                        "product": "33333",
                        "description": "description 3"
                      }, {
                        "product": "44444",
                        "description": "description 4"
                      }, {
                        "product": "55555",
                        "description": "description 5"
                      }]; 

    jsonOptions.forEach(function(item) {

      var option = document.createElement('option');

      option.value = item.description;
      option.text = item.description;
      option.setAttribute('data-product', item.product);
      dataList.appendChild(option);
    });

$(function() {
    $('#ajax').change(function() {
        var description = $(this).val();
        var product = $('#json-datalist > option[value="' + description + '"]').data('product');
        $('input[name=product-'+ counter + ']').val(product);

    });
});


$('#bookForm')
    // Add button click handler
    .on('click', '.addButton', function() {
        counter++;
        var $template = $('#bookTemplate'),
            $clone    = $template
                            .clone()
                            .removeClass('hide')
                            .removeAttr('id')
                            .attr('data-book-index', counter)
                            .insertBefore($template);

        // Update the name attributes
        $clone
            .find('[name="description"]').attr('name', 'description-' + counter).end()
            .find('[name="product"]').attr('name', 'product-' + counter).end();
    })

    // Remove button click handler
    .on('click', '.removeButton', function() {
        var $row  = $(this).parents('.form-group'),
            index = $row.attr('data-book-index');

        // Remove element containing the fields
        $row.remove();
    });

另一件事是，如果用户多次按下加号按钮来创建输入，然后尝试填充第一个输入，那么最后一个输入将被填充..

Answer 1

基本上，您用于更新产品的动态描述选择器（“#ajax”）和计数器（采用最后修改的计数器）是错误的。

解决方案：http://www.bootply.com/ZckX8mlKOQ

动态添加多个输入

Add multiple inputs dynamically

javascript

javascript-events