Отслеживание события изменения динамически добавленных флажков

Question

Использование следующего кода для запуска события изменения для флажков, содержащихся в определенном классе на странице, но событие изменения не срабатывает для флажков, которые я динамически добавляю в класс.

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

    }
}

Answer 1

Может быть, если вы связываете событие change с документом, а затем проверяете target.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);
    }
});

Он должен работать на любом элементе с className == 'Premium', несмотря натот факт, что он был создан после того, как DOM готов.

Answer 2

Для динамически создаваемых элементов вам необходимо прикрепить слушатели событий к элементам.Пример: document.getElementsByClassName ('Premium') [i] .addEventListener ("change", function () { ваш код });

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].addEventListener("change", 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);

   });
}