jquery funktioniert nicht bei dynamisch hinzugefügten Tabellenzeilen

Question

So habe ich eine Tabelle, in der der Benutzer etwas eingeben wird und in der letzten Spalte wird es automatisch auf der Grundlage der Eingabe der anderen Spalten ausgefüllt werden. Es funktioniert gut genug, aber sobald ich der Tabelle eine weitere Zeile hinzufüge, füllt es nicht die letzte Spalte wie die ursprüngliche Zeile.

Also meine Frage ist, was ist falsch und wie kann ich das beheben?

Danke!

Skript für das Hinzufügen von Zeilen:

$('.add_row_count').on('click',function(){ 
event.preventDefault(); 
var newRow = $('<tr><td style = "text-align: center;"><input type="text" name="categ_name[]" id="categ_name" value="" placeholder="Item Category" required></td> ' + 
'<td style = "text-align: center;"><input type="number" name="beg_count[]" id="beg_count" value="" placeholder="BEG Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="del_count[]" id="del_count" value="" placeholder="DEL Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="ret_count[]" id="ret_count" value="" placeholder="RET Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="exc_count[]" id="exc_count" value="" placeholder="EXC Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="pout_count[]" id="pout_count" value="" placeholder="P-Out Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="sales_count[]" id="sales_count" value="" placeholder="SALES Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="end_count[]" id="end_count" value="" placeholder="END Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="actual_count[]" id="actual_count" value="" placeholder="Actual Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="variance[]" id="variance" value="" placeholder="Variance" readonly></td>' + 
'<td style="border-top: 1px solid white; border-bottom: 1px solid white; border-right: 1px solid white"><button class="del" id="delete_row_count" type="button" onclick="deleterow_count();">Delete row</button></td></tr>'); 
$('table.count').append(newRow); 
}); 

Skript für die letzte Spalte bevölkert:

 $('#categ_name,#beg_count, #del_count, #ret_count,#exc_count, #pout_count, #sales_count,#end_count, #actual_count, #variance').keyup(function(){ 

    var end = $('#end_count').val(); 
    var ac = $('#actual_count').val(); 

    var total_variance = end - ac; 


    $('#variance').val(total_variance);  
    }); 

Geige: https://jsfiddle.net/qhk3ha75/3/

Answer 1

Was Sie wirklich brauchen, ist classes im gesamten Code zu nutzen und zu Verwenden Sie event delegation, um auf Ereignisse auf dynamic elements zu hören. Hier

ist ein Beispiel Lösung:

jsFiddle

var $tbody = $('#count tbody'); 
 
$('.add_row_count').on('click', function() { 
 
    event.preventDefault(); 
 
    var $row = $tbody.find('tr').eq(0).clone(); 
 
    $row.find('input').val(''); 
 
    var $newRow = $($row[0].outerHTML); 
 
    $tbody.append($newRow); 
 
}); 
 
$tbody.on('keyup', '.calculate', function() { 
 
    var $tr = $(this).closest('tr'); 
 
    var end = $tr.find('.end_count').val(); 
 
    var ac = $tr.find('.actual_count').val(); 
 
    var total_variance = end - ac; 
 
    $tr.find('.variance').val(total_variance); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" value="" class="add_row_count" id="hide">Add another row</a> 
 
<table id='count' class="table table-bordered count" cellspacing="0" width="100%"> 
 
    <thead> 
 
    <tr> 
 
     <th style="text-align: center; width:180px"></th> 
 
     <th style="text-align: center;">BEG</th> 
 
     <th style="text-align: center;"> DEL</th> 
 
     <th style="text-align: center;"> RET</th> 
 
     <th style="text-align: center;"> EXC</th> 
 
     <th style="text-align: center;"> P-OUT</th> 
 
     <th style="text-align: center;"> SALES</th> 
 
     <th style="text-align: center;"> END</th> 
 
     <th style="text-align: center;"> ACTUAL COUNT</th> 
 
     <th style="text-align: center;"> VARIANCE</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td style="text-align: center;"> 
 
     <input type="text" name="categ_name[]" class="calculate categ_name" value="" placeholder="Item Category" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="beg_count[]" class="calculate beg_count" value="" placeholder="BEG Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="del_count[]" class="calculate del_count" value="" placeholder="DEL Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="ret_count[]" class="calculate ret_count" value="" placeholder="RET Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="exc_count[]" class="calculate exc_count" value="" placeholder="EXC Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="pout_count[]" class="calculate pout_count" value="" placeholder="P-Out Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="sales_count[]" class="calculate sales_count" value="" placeholder="SALES Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="end_count[]" class="calculate end_count" value="" placeholder="END Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="actual_count[]" class="calculate actual_count" value="" placeholder="Actual Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="variance[]" class="variance" value="" placeholder="Variance" readonly> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>