Функция JS, не работающая над добавленными строками

Question

Третья функция JS изменяет запятую на точечные строки по существующим строкам, но когда я добавляю новую строку с первой функцией, она не работает над новыми строками. Как я могу это исправить?

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $("#addPurchase").click(function() 
    { 
     $("#tablePurchases tr:last").after('<tr>'+ 
     '<td><input type="text" name="comment[]" style="width:250px;" maxlength="255" value="Hi!" /></td>'+ 
     '<td><input type="text" name="do[]" style="width:70px; text-align:right;" value="0.00" /></td>'+ 
     '<td><input type="text" name="dds[]" style="width:50px; text-align:right;" value="0.00" /></td>'+ 
     '</tr>'); 
    }); 

    $("#removePurchase").click(function(){ 
     if($("#tablePurchases tr").length>2) { $("#tablePurchases tr:last").remove();total(); }; 
    }); 

    $("#tablePurchases td:nth-child(2)").on('keyup',function(){ 
     $(this).children().val($(this).children().val().replace(",", ".")); 
    }); 

}); 
</script> 
<a href="javascript:void(0);" id="addPurchase">Add</a>/ 
<a href="javascript:void(0);" id="removePurchase">Remove</a><br /> 
<table style="font-family:'Book antiqua';" id="tablePurchases"><tbody> 
<tr align="center"> 
<th>Field1</th> 
<th>Field2</th> 
<th>Field3</th> 
</tr> 
<tr> 
<td><input type="text" name="comment[]" style="width:250px;" maxlength="255" value="Hi!" /></td> 
<td><input type="text" name="do[]" style="width:70px; text-align:right;" value="0.00" /></td> 
<td><input type="text" name="dds[]" style="width:50px; text-align:right;" value="0.00" /></td> 
</tr> 
<tr> 
<td><input type="text" name="comment[]" style="width:250px;" maxlength="255" value="Hi!" /></td> 
<td><input type="text" name="do[]" style="width:70px; text-align:right; " value="0.00"/></td> 
<td><input type="text" name="dds[]" style="width:50px; text-align:right; " value="0.00"/></td> 
</tr> 
</table> 

Answer 1

При привязке событий к динамически созданным элементам вам необходимо использовать делегированный синтаксис .on().

Изменение:

$("#tablePurchases td:nth-child(2)").on('keyup',function(){ 
    $(this).children().val($(this).children().val().replace(",", ".")); 
}); 

к:

$('table').on('keyup', '#tablePurchases td:nth-child(2)', function(){ 
    $(this).children().val($(this).children().val().replace(",", ".")); 
});