获取动态添加的表单元素的价值

Question

我有一个表单，用户可以动态添加更多行，每行包含item和price两个元素。我想要实现的是当用户选择item时，我想使用jQuery立即知道选择了哪个项目。

首先，这是 HTML表单。页面加载时，用户将看到一行表单输入。如果他们有更多要输入的内容，他们可以点击“添加新内容”。添加更多行。

<form id="form">

  <input type="submit" name="create" value="Go" />

  <!-- Show one line as default -->
  <div class="form-row">

    <!-- "Add new" button -->
    <div class="form-group">
      <label class="control-label"></label>
      <button type="button" class="btn btn-default addButton">Add new</button>
    </div> 

    <!-- User select: item -->
    <div class="form-group">
      <label class="control-label">Item</label>
      <select class="item form-control" name="item[]">
        <option value="item-1">Item 1</option>
        <option value="item-2">Item 2</option>
        <option value="item-3">Item 3</option>
      </select>
    </div>

    <div class="form-group">
      <label class="control-label">Price</label>
      <input type="text" class="price form-control" name="price[]" />
    </div>

  </div>

  <!-- Add more lines or remove lines dynamically -->
  <div class="form-row hide" id="template">

    <!-- "Remove" button -->
    <div class="form-group">
      <label class="control-label"></label>
      <button type="button" class="btn btn-default removeButton">Remove</button>
    </div> 

    <!-- User select: item -->
    <div class="form-group">
      <label class="control-label">Item</label>
      <select class="item form-control" name="item[]">
        <option value="item-1">Item 1</option>
        <option value="item-2">Item 2</option>
        <option value="item-3">Item 3</option>
      </select>
    </div>

    <div class="form-group">
      <label class="control-label">Price</label>
      <input type="text" class="price form-control" name="price[]" />
    </div>

  </div>

</form>

并在此处 javascript 动态添加/删除行。动态添加和删除行可以正常工作。

<script>
jQuery(document).ready(function($) {

    $('#form')

        // Add button click handler
        .on('click', '.addButton', function() {
            var $template = $('#template'),
                $clone  = $template
                         .clone()
                         .removeClass('hide')
                         .removeAttr('id')
                         .insertBefore($template);
        })

        // Remove button click handler
        .on('click', '.removeButton', function() {
                var $row = $(this).parents('.form-row');
                $row.remove();
        });     

});
</script>

Lsatly，我的jQuery来检测选择了哪个项目。这不符合预期。正如您所看到的，我正在尝试如下的许多组合，但总是无法提醒动态添加的表单元素的正确项目。

<script>
jQuery(document).ready(function($) {

    /* This alerts 'undefined' for the first row,
       and does not alert anything for dynamically added rows */
    $('.item').change(function(){    
        var     row    = $(this).parent('.form-row'),
                $item   = $row.find('.item').val();    
        alert( $item );
    });

    /* This alerts proper item for the first row,
       but does not alert anything for dynamically added rows */
    $('.item').change(function(){    
        var     row    = $(this).parent(),
                $item   = $row.find('.item').val();    
        alert( $item );
    });

    /* This alerts proper item for the first row,
       but does not alert anything for dynamically added rows */
    $('.item').change(function(){    
        var     row    = $(this).parent('.form-group').parent('.form-row'),
                $item   = $row.find('.item').val();    
        alert( $item );
    });

    /* This alerts proper item for the first row, 
       but does not alert anything for dynamically added rows */
    $('.item').change(function(){    
        var     $item   = $(this).val();    
        alert( $item );
    });

    /* This alerts proper item for the first row, 
       but does not alert anything for dynamically added rows */
    $('.form-row').change(function(){    
        var     row    = $(this),
                $item   = $row.find('.item').val();    
        alert( $item );
    });

    /* This alerts proper item for the first row, 
       but does not alert anything for dynamically added rows */
    $('.form-row').change(function(){    
        var     row    = $(this).parent(),
                $item   = $row.find('.item').val();    
        alert( $item );
    });



});

请帮忙。