onChangeは自動入力されたフィールドでは機能しません

Question

私は、ユーザーが受益者を選択したときに指定されたパーセンテージを自動入力する受益者フォームを作成しました。たとえば、ユーザーはChild 1を選択することができ、別の表のChild 1に指定した割合（％）に基づいて、この割合で自動的にその割合を入力します（beneficiary_1（））。私は

function percentSum(){ 
    var arr = document.getElementsByName('beneficiary_share'); 
    var tot=0; 
    for(var i=0;i<arr.length;i++){ 
     if(parseInt(arr[i].value)) 
      tot += parseInt(arr[i].value); 
    } 
    document.getElementById('total_percentage').value = tot; 
} 

...割合のすべてを合計するが、私はそれが自動投入さフィールドで動作するとは思わない割合フィールドごとに別々のonChangeスクリプトを作成し、私はこれを変更することができる方法はありますそれは自動入力されたフィールドで動作しますか？

HTML：

<tr> 
    <td style="border-right: 1px solid #000000;"> 
    <g:ui_reference name="family_member_1" id="family_member_1" table="hr_beneficiary" query = "active=true^employee=javascript:gs.getUserID()" completer="AJAXTableCompleter" columns="employee; beneficiary_contact.relationship" onChange="beneficiary_1()" /> 
    </td> 
    <td class = "inside"><input class = "sf2823" type="text" id="fm1_ssn" name ="fm1_ssn" style="background-color:#dddddd" readonly="readonly"/> 
    </td> 
    <td class = "inside"><input class = "sf2823" type="text" id="fm1_address" name ="fm1_address" style="background-color:#dddddd" value="" readonly="readonly"/> 
    </td> 
    <td class = "inside"><input class = "sf2823" type="text" id="fm1_relationship" name ="fm1_relationship" style="background-color:#dddddd" value="" readonly="readonly"/> 
    </td> 
    <td><input class = "sf2823" type="text" id="fm1_percentage" name ="beneficiary_share" style="background-color:#dddddd" value="" readonly="readonly" onChange="percentSum()"/> 
    </td> 
</tr> 

Answer 1

あなたは高いDOM要素から聞くことがあります。例えば

：

$(document).on('change', '#beneficiary_share', percentSum); 

新しい要素percentSum関数が呼び出されることを追加します。