Question

我有一个带有货币值输入字段的表单，其值在keyup事件中加在一起，并且总数已插入到另一个输入字段中。这很好。

<table id="itemsqty"><tr><th style="min-width: 4em;">Qty</th><th style="min-width: 10em;">Description</th><th style="width: 4em;">Price</th></tr>
<tr><td><select name="qty[]" id="qty0"><option selected="selected">1</option>    <option>2</option><option>3</option><option>4</option><option>5</option></select></td><td>    <input placeholder="Enter item name in here" type="text" name="item[]" id="item0" /></td>    <td><input class="itemprice" placeholder="Total price for this item" type="text"      name="itemprice[]" id="itemprice0" /></td></tr>
<tr><td><select name="qty[]" id="qty1"><option selected="selected">1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></td><td><input placeholder="Enter item name in here" type="text" name="item[]" id="item1" /></td><td><input class="itemprice" placeholder="Total price for this item" type="text"  name="itemprice[]" id="itemprice1" /></td></tr>
<tr><td><select name="qty[]" id="qty2"><option selected="selected">1</option>   <option>2</option><option>3</option><option>4</option><option>5</option></select></td><td>  <input placeholder="Enter item name in here" type="text" name="item[]" id="item2" /></td><td><input class="itemprice" placeholder="Total price for this item" type="text"  name="itemprice[]" id="itemprice2" /></td></tr>
<tr id="totalrow"><td><a href="javascript:;" id="addanotherlnk">Add another item</a></td><td style="text-align: right;padding-right: 7px;float: right;"><label for="gtotal" >Total:</label></td><td><input readonly type="text" name="gtotal" id="gtotal" value="£0.00" /></td></tr></table>

使用此脚本更新总输入字段（#gtotal）的值，它可以正常工作：

$('.itemprice').live("keyup", function (event) {
    var t = 0;
    for (var ip=0; ip <3; ip++){
        a = $('#itemprice'+ip).val();
        a = a.replace("£","");
        //t = t + a;
        t = Number(t) + Number(a);
    }

    //then add all values
    $('#gtotal').val('');
    var formattedMoney = '£' + t.formatMoney(2,',','.');
    $('#gtotal').val(formattedMoney);
});

然后，用户可以使用触发此脚本的链接添加新字段：

$('#addanotherlnk').click(function(){
    //count number of items of same class
    var ic;
    ic = $('.itemprice').length;

    $('<tr><td><select name="qty[]" id="qty'+ic+'"><option selected="selected">1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></td><td><input placeholder="Enter item name in here" type="text" name="item[]" id="item'+ic+'" /></td><td><input class="itemprice" placeholder="Total price for this item" type="text"  name="itemprice[]" id="itemprice'+ic+'" /></tr>').insertBefore('#totalrow');
});

这样可以正常工作并为输入添加唯一ID。但是，更新总计的脚本似乎无法识别此新输入字段。我知道这是一个事实，这是一个动态添加的字段，因此我使用jquery .live（）方法，但这并没有解决问题。

非常感谢所有帮助。

Answer 1

你的keyup处理程序被编码为仅循环显示前3个元素 - 你已经硬编码限制为3：

for (var ip=0; ip <3; ip++){

相反，你应该使用“itemprice”类循环遍历所有元素：

var t = 0;
$('.itemprice').each(function() {
    t += Number( this.value.replace("£","") );
}

Answer 2

在你的情况下问题是......你已经在你的for循环中对3进行了编码...所以它需要3输入的值，并且动态添加的输入实际上没有被添加到总... ...

我建议你创建一个完成总计算的函数.....并在keyup函数中调用它

试试这个：

function sumItemprice()  // function to calculate the sum
{
   var sum=0;
   $.each($('input.itemprice'),function(){ //select all ur input with the classname
     //add only if the value is number
      if(!isNaN($(this).val()) && $(this).val().length!=0)
      {
          sum += parseFloat($(this).val());  // DO YOUR STUFF HERE (REPLACE or sumthing..)
      }
   });

  $('#gtotal').val(sum);
}

和keyup函数

$('.itemprice').bind("keyup",sumItemprice);

注意：不推荐使用live（），建议使用on（）。

jquery选择器未找到动态插入的输入

2 个答案: