Summe Menge Arbeit nicht von Ajax-Antwort

Question

mit versuche ich, dieses Format, aber es funktioniert nicht

**

"name": [{ 
    "id": 3, 
    "qty": 2 
}, { 
    "id": 4, 
    "qty": 5 
}] 

** Diese meine Funktion erhalten, sobald nach der Antwort auf keyup Menge Textbox ist, ich will hinzufügen alle Menge in ein Textfeld und zeigen alle eingegebenen Wert-ID und Menge, die oben erwähnt Format

function _getPriceCalculation() { 
      var sum = 0; 
      $.ajax({ 
       type: "GET", 
       url: $('#categoryList').val(), 
       dataType: 'json', 
       success: function(data) { 
        $.each(data, function(index, item) { 
         $('<div id="price_calculation"><div class="col-lg-4 main"><input type="text" value="'+item.name+'" readonly class="form-control"/></div><div class="col-lg-4 main" style="display:none;"><input type="text" name="id" id="price-'+item.id+'" value="'+item.price+'" readonly class="form-control" onkeypress="return isNumber(event)"/></div><div class="col-lg-4 main"><input type="text" value="" name="qty" id="qty-'+item.id+'" class="form-control qty" onkeypress="return isNumber(event)"/></div><div class="col-lg-4 main"><input type="text" name="amount" id="amount-'+item.id+'" value="" readonly class="form-control amount" onkeypress="return isNumber(event)"/></div>').appendTo("#price-calculation-view");  
         $("#qty-"+item.id).keyup(function(){ 
          var qty = $("#qty-"+item.id).val(); 
          var price = $("#price-"+item.id).val(); 
          var total = qty * price; 
          $("#amount-"+item.id).val(total); 
         }); 
        }); 
       } 
      }); 

     } 

$(document).on("keyup", "input[name='qty']", function() { 
    //$('input[name="qty"]').change(function(){ 
     // alert(); 
     var name = []; 
     $('.main').each(function(index,item){ 
     var obj={}; 
     obj.id = $(item).find('input[name="id"]').val(); 
     obj.qty = $(item).find('input[name="qty"]').val(); 
     name.push(obj) 
     }); 
     console.log(name); 
}); 

Wie dies zu erreichen?

Answer 1

$("#qty-"+item.id)DOM Elemente dynamisch auf der Seite hinzugefügt.

Sie müssen event delegation für Elemente verwenden, die dynamisch hinzugefügt wurden.

Sie sollten keyup Ereignishandler mit .on() Methode binden.

Ereignis Delegation ermöglicht es uns, ein einzelnes Ereignis-Listener zu befestigen, an einem übergeordnetes Element, das für alle Nachkommen Anpassen eines Selektor ausgelöst wird, ob diese Nachkommen existieren jetzt oder in der Zukunft hinzugefügt.

$(document).on('keyup','#qty-'+item.id, function(){ 
    var qty = $("#qty-"+item.id).val(); 
    var price = $("#price-"+item.id).val(); 
    var total = qty * price; 
    $("#amount-"+item.id).val(total); 
});