jQuery运行总函数不能在所有字段上运行

时间:2016-09-16 18:25:53

标签: javascript jquery

我有一个应该保持运行总成本的表单,但是keyup在第二个字段中不起作用。 (注意,第二个字段和后续字段可以动态生成,但这些字段也不起作用。)

$('.price').keyup(function () {

    var sum = 0;

    $('.price').each(function() {
        sum += Number($(this).val());
    });

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

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

非常感谢任何帮助/建议。 THX。

1 个答案:

答案 0 :(得分:0)

添加新元素后,您需要重新附加事件。通过这种方式,新添加的元素也将附加事件: 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函数就在那里,因此您可以保存一些代码行并获得更好的可维护代码。