JS函数无法处理添加的行

时间:2013-12-20 14:22:49

标签: javascript jquery

第三个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>

1 个答案:

答案 0 :(得分: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(",", "."));
});