Warum funktionieren die Preise für Eingabefelder nicht nach dem dynamischen Hinzufügen neuer Felder?

Question

Ich baue eine Rechnungs App mit jQuery. Die Anwendung kann automatisch Preise berechnen und durch Drücken der Schaltfläche "ADD LINE" auch neue Eingabefelder erzeugen. Das Problem, das ich habe, ist, dass die allererste Reihe von Eingabefeldern immer funktioniert, aber sobald Sie anfangen, neue Felder hinzuzufügen, werden die Preise und Quantitätszahlen von der App überhaupt nicht berechnet. Das Schlimmste ist, dass die Konsole keine Fehler in meinem Skript erwähnt, also weiß ich wirklich nicht, was los ist.

Danke,

Hier ist mein Code:

// Core functions for calculations 
$('input[name=r],input[name=p]').change(function(e) { 
    var total = 0; 
    var $row = $(this).parent(); 
    var rate = $row.find('input[name=r]').val(); 
    var pack = $row.find('input[name=p]').val(); 
    total = parseFloat(rate * pack)*1; 

    //update the row total 
    $row.find('.amount').html((total).toFixed(2)); 

    var total_amount = 0; 
    var tax = 1.06; 
$('.amount').each(function() { 
    //Get the value 
    var am= $(this).text(); 
    console.log(am); 
    //if it's a number add it to the total 
    if (IsNumeric(am)) { 
     total_amount += parseFloat(am, 10); 
    } 

    // Get total with tax 
     taxTotal = (tax * total_amount); 
    }); 
    // Total with out tax 
    $('.total_amount').html('<p> $ '+(total_amount).toFixed(2)+'</p>'); 

    // Total with tax 
    $('.after_tax').html('<p> $ '+(taxTotal).toFixed(2)+'</p>'); 

}); 

//if it's a number add it to the total 
function IsNumeric(input) { 
    return (input - 0) == input && input.length > 0; 
} 


// generate a new row 
function AddRow(){ 
    var wrapper = $('.input_fields_wrap'); 
    var addButton = $('#add_row'); 

    var x = 1; 
    $(addButton).click(function(){ 
    x++; 
    $(wrapper).append('<div><input class="description" type="text" maxlength="255" placeholder="Enter Description" value=""/><input name="r" class="rate qty" type="text" maxlength="255" placeholder="0" size="5" value=""/><input name="p" class="pack price" type="text" maxlength="255" placeholder="$ 0.00" size="5" value=""/><span id="amount" class="amount">0.00</span><a class="btn btn-danger removeRow">X</a></div>'); 
}); 

// Remove row 
$(wrapper).on('click', '.removeRow', function(){ 
    $(this).parent('div').remove(); 
     x--; 
    }); 
} 
AddRow(); 

Answer 1

Die Veranstaltung Änderung auf alle dynamisch hinzugefügt Eingabeelemente nicht gebunden ist. Verwenden Sie jQuery .on() Methode auf einen Vorfahren Selektor:

$('body').on('change', 'input[name=r],input[name=p]', (function(e) { 
    // ... 

Im Idealfall sollten Sie den nächsten Vorfahren an die Eingänge wählen, die in der DOM liegt vor, wenn die Seite gerendert wird.