jQuery运行的总函数不是在所有字段上工作

jQuery running total function not working on all fields

本文关键字:字段 工作 运行 函数 jQuery      更新时间:2023-09-26

我有一个表单,应该保持运行的总成本,但keyup不工作在第二个领域。(注意第二个字段和后面的字段可以动态生成,它们也不能工作。)

$('.price').keyup(function () {
    var sum = 0;
    $('.price').each(function() {
        sum += Number($(this).val());
    });
    $('#totalPrice1').val(sum);
});

这里是完整的JSFiddle: https://jsfiddle.net/statk7y1/

任何帮助/建议都将非常感谢。Thx .

添加新元素后需要重新附加事件。通过这种方式,新添加的元素也将附带事件:https://jsfiddle.net/tztoc8v0/

var calculateTotal = function() {
    var sum = 0;
    $('.price').each(function() {
        sum += Number($(this).val());
    });
    $('#totalPrice1').val(sum);
}
$(document).ready(function() {
    $('<div/>', {
        'class': 'extraProjecta',
        html: GetHtml()
    }).appendTo('#container');
   $('#addProj').click(function() {
        $('<div/>', {
           'class': 'extraProjecta',
            html: GetHtml()
        }
    ).hide().appendTo('#container').slideDown('slow');
    $('.price').off('keyup').keyup(calculateTotal);
});
$('.price').off('keyup').keyup(calculateTotal);
})
function GetHtml() {
    var len = $('.extraProjecta').length;
    var $html = $('.extraProjectaTemplate').clone();
    $html.find('[name=projCost]')[0].name = "projCost" + len;
    return $html.html();
}

calculateTotal函数就在那里,因此您可以节省一些代码行,以便更好地维护代码。