如何在JQuery中为动态创建的元素绑定事件 [英] How to bind event for dynamically created elements in JQuery

问题描述

我使用jquery创建了一些动态元素，并在动态元素中添加了使用ajax的下拉列表，问题是当我从下拉列表中选择一个选项时，然后即将到来的ajax数据覆盖所有其他动态元素数据。

$ b

< div id =dsp> < div class =row> < div class =col-md-2> < select name =p_name []class =form-control p_name> < option value => - 选择产品 - < / option> @foreach（$ products as $ product）< option value ={{$ product-> product_id}}> {{$ product-> name}}< / option> @endforeach< / select> < / DIV> < div class =col-md-2> < input type =textname =p_code []class =form-control p_code> < / DIV> < div class =col-md-2> < input type =textname =unit_pctn []class =form-control unit_pctnreadonly => < / DIV> < div class =col-md-2> < input type =textname =u_price []class =form-control u_pricereadonly => < / DIV> < div class =col-md-1> < input type =textname =ctn []class =form-control ctn> < / DIV> < div class =col-md-1> < input type =textname =pcs []class =form-control pcs> < / DIV> < div class =col-md-2> < input type =textname =t_amt []class =form-control t_amt> < / DIV> < / div>< br>< / div>

解决方案

尝试这种方式。以这种方式工作的数据绑定并计算总数也可以。

  $（document）.ready（function（）{
 $（'＃dsp'）。on（'change'，'。p_name'，function（）{
 var pid = $（this）。 val（）; 
 var parent = $（this）.closest（'。row'）; 
 // alert（pid）; 
 $ .ajax（{
 url： {{route（'getinfo'）}}，
 method：'post'，
 data：{id：pid，'_ token'：{{csrf_token（）}}}，
成功：函数（响应）{
 
 //alert(response.code）; 
 parent.find（'。p_code'）。val（response.code）; 
 parent.find（'。unit_pctn'）.val（response.pcs_per_ctn）; 
} 
}）; 
 
 $ .ajax（{
 url： {{route（'getprice'）}}，
 method：'post'，
 data：{id：pid，'_ token'：{{csrf_token（）}}}，
成功：函数（响应）{
 //alert（response.code）; 
 
 parent.find（'。u_price'）。val（response.client_price）; 
 
} 
}）; 
 
 
 
}）; 
 $ b $ //在这里计算
 
 $（'＃dsp'）。on（'input'，'。ctn'，function（）{
 var cal = $（this）.val（）; 
 var gparent = $（this）.closest（'。row'）; 
 var unitp = gparent.find（'。u_price'）。val（）; 
 var unitpctn = gparent.find（'。unit_pctn'）。val（）; 
 var pcs = gparent.find（'。pcs'）。val（）; 
 // alert（ pcs）; 
 var total =（（（parseInt（unitpctn）* parseInt（cal））+ parseInt（pcs））* parseInt（unitp））; 
 
 gparent.find（'。 t_amt'）。val（total）; 
 
 //总计
 var gt = 0; 
 var gt = parseInt（gtotal）+ parseInt（total）
 // alert（gtotal）; 
 $（'＃tot'）。val（gtotal）; 
 
 
}）; $（'＃dsp'）。on（'input'，'。pcs'，function（）{
 var pcs = $（this）.val（）; $ b $ （'。row'）; 
 var unitp = gparent.find（'。u_price'）。val（）; 
 var unitpctn = gparent.find（' .unit_pctn'）。val（）; 
 var ctn = gparent.find（'。ctn'）。val（）; 
 // alert（pcs）; 
 var total =（（ （parseInt（unitpctn）* parseInt（ctn））+ parseInt（pcs））* parseInt（unitp））; 
 
 gparent.find（'。t_amt'）。val（total）; 
 
 //总计
 
 var gt = 0; 
 $（'。t_amt'）。each（function（）{gtotal + = parseFloat（$（this））。 val（））|| 0; $（'＃tot'）。val（gtotal）;}）; 
}）; 
 
}）; 
  

i have created some dynamic elements using jquery and add a dropdownlist using ajax inside dynamic elements ,The problem is when i select a option from a dropdownlist,then upcoming ajax data are override the all other dynamic elements data.

now i want to bind data every dynamic elements data separately in jquery.

  $(document).ready(function() {
  var html = $("#dsp > .row:first").first().html();
  var maxrows = 5;
  var x = 1;
  $("#addrow").click(function() {
    if (x <= maxrows) {
      $('#dsp').append(html);
      x++;
    }
  });

  $("#rmvrow").click(function() {
    $('#dsp').children().last().remove();
  });
  
    $('#dsp').on('change','.p_name',function(){
      var pid=$(this).val();
      var parent=$('#dsp');
      
      //alert(pid);
      $.ajax({
        url:"{{route('getinfo')}}",
        method:'post',
        data:{id:pid,'_token':"{{csrf_token()}}"},
        success:function(response) {  
            console.log(parent.find('.p_code').val(response.code));
  
        }
      });

    });
});


  

           <div id="dsp">
  <div class="row">
    <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[]" class="form-control p_code">
    </div>
    <div class="col-md-2">
      <input type="text" name="unit_pctn[]" class="form-control unit_pctn" readonly="">
    </div>
    <div class="col-md-2">
      <input type="text" name="u_price[]" class="form-control u_price" readonly="">
    </div>
    <div class="col-md-1">
      <input type="text" name="ctn[]" class="form-control ctn">
    </div>
    <div class="col-md-1">
      <input type="text" name="pcs[]" class="form-control pcs">
    </div>
    <div class="col-md-2">
      <input type="text" name="t_amt[]" class="form-control t_amt">
    </div>

  </div><br>
</div>

解决方案

Try this way.bind data working this way and calcuate total also work.

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

          //alert(response.code);
          parent.find('.p_code').val(response.code);
          parent.find('.unit_pctn').val(response.pcs_per_ctn);
        }
      });

        $.ajax({
        url:"{{route('getprice')}}",
        method:'post',
        data:{id:pid,'_token':"{{csrf_token()}}"},
        success:function(response) {
          //alert(response.code);

          parent.find('.u_price').val(response.client_price);

        }
      });



    });

    //calculation here

    $('#dsp').on('input','.ctn',function(){
         var cal=$(this).val();
         var gparent=$(this).closest('.row');
         var unitp=gparent.find('.u_price').val();
         var unitpctn=gparent.find('.unit_pctn').val();
         var pcs=gparent.find('.pcs').val();
        //alert(pcs);
        var total=(((parseInt(unitpctn)*parseInt(cal)) + parseInt(pcs))*parseInt(unitp));

           gparent.find('.t_amt').val(total);

           //grand total
           var gtotal=0;
           var gtotal=parseInt(gtotal)+parseInt(total)
           //alert(gtotal);
           $('#tot').val(gtotal);


    });

     $('#dsp').on('input','.pcs',function(){
         var pcs=$(this).val();
         var gparent=$(this).closest('.row');
         var unitp=gparent.find('.u_price').val();
         var unitpctn=gparent.find('.unit_pctn').val();
         var ctn=gparent.find('.ctn').val();
        //alert(pcs);
        var total=(((parseInt(unitpctn)*parseInt(ctn)) + parseInt(pcs))*parseInt(unitp));

           gparent.find('.t_amt').val(total);

           //grand total

           var gtotal=0;
           $('.t_amt').each(function(){ gtotal += parseFloat($(this).val()) || 0; $('#tot').val(gtotal); }); 
         });

  });

这篇关于如何在JQuery中为动态创建的元素绑定事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！