How To Bind Event For Dynamically Created Elements In Jquery

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

Solution 1:

Keep giving dynamic id for each of your rows and use that to add listeners.

On every add row call a funtion that does

functionaddrow(rownumber) {
    document.getElementById('dsp' + rownumber).addEventListener('click', function(event) {
        // do some action
    });
}

Solution 2:

Your code for delegating event binding is fine. The problem is that your second success function doesn't put the response in the current row, it fills in all .u_price fields. Change that to:

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

When you add a new row, it needs to be inside its own <div class="row">, so that $(this).closest(".row") will select the correct row. You currently just have one class="row" and it's the #dsp DIV that contains all the rows. Each row needs to be a child of #dsp.

$(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();
  });
});

<divid="dsp"><divclass="row"><divclass="col-md-2"><selectname="p_name[]"class="form-control p_name"><optionvalue="">-Select Product-</option>
      @foreach($products as $product)
      <optionvalue="{{$product->product_id}}">{{$product->name}}</option>
      @endforeach
    </select></div><divclass="col-md-2"><inputtype="text"name="p_code[]"class="form-control p_code"></div><divclass="col-md-2"><inputtype="text"name="unit_pctn[]"class="form-control unit_pctn"readonly=""></div><divclass="col-md-2"><inputtype="text"name="u_price[]"class="form-control u_price"readonly=""></div><divclass="col-md-1"><inputtype="text"name="ctn[]"class="form-control ctn"></div><divclass="col-md-1"><inputtype="text"name="pcs[]"class="form-control pcs"></div><divclass="col-md-2"><inputtype="text"name="t_amt[]"class="form-control t_amt"></div></div></div>

Solution 3:

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 totalvar 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 totalvar gtotal=0;
           $('.t_amt').each(function(){ gtotal += parseFloat($(this).val()) || 0; $('#tot').val(gtotal); }); 
         });

  });