无法绑定数据动态追加元素jquery

Question

我有一行我有一个下拉列表我可以在页面上动态添加行并将事件绑定到选择框。

我遇到的问题是，在初始循环之后我通过Ajax或DOM添加的选择框不会有事件绑定。

这是我的观点部分。

<div class="row" id="dsp">
    <div class="col-md-2">
        <select name="p_name[]" class="form-control p_name">
            <option value="">-Select Product-</option>
            @foreach($products as $product)
            <option value="{{$product->product_id}}">{{$product->name}}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-2">
        <input type="text" name="p_code[]" id="p_code" class="form-control p_code" >
    </div>

这是我的jquery部分。

$(document).ready(function(){
  $('#dsp').on('change','.p_name',function(){
    var pid=$(this).val();
    //alert(pid);
    $.ajax({
      url:"{{route('getinfo')}}",
      method:'post',
      data:{id:pid,'_token':"{{csrf_token()}}"},
      success:function(response) {   

        //alert(response.code);
        $('.p_code').val(response.code);

      }
    });

  });
});

这是图像。

Answer 1

您应该使用DOM关系来定位所需的元素设置其值。此处.find()可用于定位共同的祖先元素，然后使用.p_code定位所需的unit_pctn和$('#dsp').on('change', '.p_name', function () { var pid = $(this).val(); //Target common parent var parent = $(this).closest('.row'); //alert(pid); $.ajax({ url: "{{route('getinfo')}}", success: function (response) { parent.find('.p_code').val(response.code); parent.find('.unit_pctn').val(response.pcs_per_ctn); } }); $.ajax({ url: "{{route('getprice')}}", success: function (response) { parent.find('.u_price').val(response.client_price); } }); }); 元素

{{1}}

注意：我认为你应该选择选择器来明智地绑定事件处理程序。您似乎使用了重复的标识符，这会使您的HTML无效。