jQueryの全機能がすべてのフィールドで機能していません

Question

私は総経費を維持するはずのフォームを持っていますが、第2フィールドではキーアップが機能していません。ここでは、フルJSFiddleだ

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

    var sum = 0; 

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

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

（2番目のフィールドに注意して、次のフィールドを動的に生成することができ、それらはどちらか動作しません。）：https://jsfiddle.net/statk7y1/

すべてのヘルプ/アドバイスをいただければ幸いです。どうも。

Answer 1

新しい要素を追加した後でイベントを再接続する必要があります。このように新たな付加要素はまた、それらに添付イベントがあります：あなたは、コードの保守性とより良いコードのためのいくつかの行を保存することができますので、 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機能は、ただそこにあります。