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

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()。