如何為JQuery中的動態創建的元素綁定事件

Question

我已經使用jquery創建了一些動態元素，並在動態元素內部使用ajax添加了一個dropdownlist，問題是當我從一個dropdownlist中選擇一個選項時，接下來的ajax數據將覆蓋所有其他動態元素數據。

現在我想在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> 

Answer 1

繼續為每行提供動態ID，並使用它來添加偵聽器。

在每個添加行上調用一個函數

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

Answer 2

您的委派事件綁定的代碼很好。 問題是您的第二個success函數未將響應放入當前行，而是填寫了所有.u_price字段。 更改為：

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

當您添加新行時，它需要位於其自己的<div class="row"> ，以便$(this).closest(".row")將選擇正確的行。 您目前只有一個class="row" ，而#dsp DIV包含所有行。 每行必須是#dsp的子#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(); }); }); 

 <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> </div> 

Answer 3

嘗試這種方式。以這種方式綁定數據並計算總數也可以。

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

  });