克隆 div 中输入块的 AJAX 更新答案

【问题标题】：AJAX update for a input block in cloned div克隆 div 中输入块的 AJAX 更新
【发布时间】：2017-01-03 19:09:21
【问题描述】：

我的 div 结构如下：

<div id="items_block" class="col-xs-12" style="margin-bottom:15px;">
    <div class="item material_item" style="border:1px solid #D9D6D6; padding:8px; background:#E7E3E3; margin:10px 0">
        <div class="form-group ">
          <label for="item_measurement_id" class="col-md-3 control-label">Item Measurement Id</label>
          <div class="col-md-9">
            <select class="required form-control col-md-12 item_measurement" id="item_measurement_id" autocomplete="off" required="true" name="item_measurement_id[]">
              <option value="" selected="selected">Select Item</option>           
              <option value="1">pAPER</option><option value="2">KirloskarGREEN</option>
          </select>
        </div>  
    </div>
</div>

我有一个 add new 按钮，它克隆了 div 类 material_item：

$('.add_more_item').click(function(e) {
    item++;
    e.preventDefault();
    var $item = $('.item');
    var $clone = $item.clone(true).removeClass('item'); // Clone item 
    $clone.appendTo("#items_block");
    show_hide_item(item);
});

现在我想在用户更改item_measurement_id 时更新rate 字段。 AJAX 如下：

$('.item_measurement').change(function(e) {

    var url     = '';
    var data    = '';
    $this = $(this);
    var item_measurement_id = $this.val();
    $parent = $this.parent(); //$('.material_item');

    url     += '{{ route("rest.item_values") }}';
    data    += '&item_measurement_id='+item_measurement_id;

    $.ajax({
        data : data,
        url  : url,
        type : 'get',
        dataType : 'json',

        error : function(resp) {
            console.log(resp);
        },
        success : function(resp) { console.log(resp.latest_rate);
            $parent.find('.rate').val(resp.latest_rate);
        }
    });
});

但是我在费率领域得到了任何东西！注意：我可以在控制台中看到正确的值

【问题讨论】：

标签： jquery ajax class clone

【解决方案1】：

在您的代码中，

    $parent = $this.parent(); //$('.material_item');

正在引用直接父级，即 $('div.col-md-9')

你应该使用

$this.parents('.material_item')

访问您正在尝试的元素。

另外，我建议使用 var 实例化 $this 和 $parent 以确保它们的范围正确，例如：

var $this = $(this);
var $parent = $this.parent();

【讨论】：

像魅力一样工作..谢谢