onChange不適用於自動填充的字段

Question

我創建了一個受益人表單，當用戶選擇受益人時，該表單會自動填充指定的百分比。 例如，用戶可以選擇“子代1”，然后根據他們在另一個表中為“子代1”指定的百分比份額，它以這種形式自動填充該百分比（函數beneficiary_1（））。 我為每個百分比字段創建了一個單獨的onChange腳本以匯總所有百分比，但是我認為它不適用於自動填充的字段...

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;
}

有什么辦法可以修改它，使其適用於自動填充的字段？

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函數。