Javascript 在动态添加的复选框上监视更改事件

使用以下代码对页面上特定类中包含的复选框触发更改事件，但对我动态添加到该类中的复选框触发更改事件失败

var Premiuminputs = document.getElementsByClassName('Premium'),
    Premiumtotal  = document.getElementById('Premium'),
    prePremiumTotal = document.getElementById('PremiumTotal');

for (var i=0; i < Premiuminputs.length; i++) {

    document.getElementsByClassName('Premium')[i].onchange = function() {

        var add = this.value * (this.checked ? 1 : -1);
        prePremiumTotal.innerHTML = Number(parseFloat(prePremiumTotal.innerHTML) + add).toFixed(2); 
        //now add shop charges via javascript and put in visible total
        var pre = parseFloat(prePremiumTotal.innerHTML);
        if((pre * .25) > 52.65){
            pre = pre + 52.65
        }else{
            pre += pre * .25;
        }
        Premiumtotal.innerHTML = Number(pre).toFixed(2);

    }
}

var premiuminput=document.getElementsByClassName（'Premium'），
Premiumtotal=document.getElementById（'Premium'），
PremiumTotal=document.getElementById（'PremiumTotal'）；
对于（变量i=0；i52.65）{
pre=pre+52.65
}否则{
pre+=pre*.25；
}
Premiumtotal.innerHTML=Number（pre）.toFixed（2）；
}
}

如果您将

change

事件绑定到文档，然后在激发时验证

目标.className

，则可能是这样的：

var Premiuminputs = document.getElementsByClassName('Premium'),
    Premiumtotal = document.getElementById('Premium'),
    prePremiumTotal = document.getElementById('PremiumTotal');

document.addEventListener('change', function(event) {
    if (event.target.className == 'Premium') {
        var el = event.target,
            add = el.value * (el.checked ? 1 : -1);
        prePremiumTotal.innerHTML = Number(parseFloat(prePremiumTotal.innerHTML) + add).toFixed(2);
        //now add shop charges via javascript and put in visible total
        var pre = parseFloat(prePremiumTotal.innerHTML);
        if ((pre * .25) > 52.65) {
            pre = pre + 52.65
        } else {
            pre += pre * .25;
        }
        Premiumtotal.innerHTML = Number(pre).toFixed(2);
    }
});

尽管它是在DOM准备好之后创建的，但它应该可以处理任何具有

className==“Premium”

的元素