почему прослушиватель событий не запускается для динамически созданных переключателей

Question

вот какой-то код для простого приложения для викторины. Массив объекта используется для хранения вопроса, параметров и правильного ответа. Каждый вопрос имеет четыре вероятных ответа, которые хранятся в массив. Для этих четырех вариантов я создал четыре динамических input radio element. Каждому из четырех входных радиоэлементов назначен прослушиватель событий. Но каким-то образом прослушиватель событий не запускает. Какая может быть причина этого? для удобства я даю ту часть, где актуальная проблема лежит:

var setQues=(function(){ 

      var index=0; 
      var span=document.createElement('span'); 
      span.setAttribute('style','color:crimson;font-weight:20px;'); 
      span.setAttribute('id','myspan'); 
      var div=document.getElementById('mydiv'); 
      var btn=document.getElementById('btn'); 


      return function(){ 
       div.innerHTML=''; 
       span.innerHTML=ques[index].title; 
       div.appendChild(span); 
       div.innerHTML+='</br>'; 
       ques[index].option.forEach(function(el,indx,arr){ 
       var input=document.createElement('input'); 
       input.setAttribute('type','radio'); 
       input.setAttribute('name','question'); 
       input.setAttribute('id',ques[index].option[indx]); 

       input.value=el; 
       div.appendChild(input); 

       var label=document.createElement('label'); 
       label.setAttribute('for',ques[index].option[indx]); 
       label.innerHTML=el; 


       div.appendChild(label); 
       input.addEventListener('change',function(e){ 

        alert(this); 

       }); 
       div.innerHTML+='</br>'; 

      }); 

      (index < ques.length-1) ? (btn.value='next',index++) : (btn.value='start quiz again',index=0); 


      }})() 

      document.getElementById('btn').addEventListener('click',setQues); 

ПОЛНЫЙ КОД:

var ques=[ 
 
      { 
 
\t \t  title:'who is the captain of bangladesh odi team?', 
 
\t \t  option:['mashrafee','tamim','sakib','mushfic'], 
 
\t \t  crctAns:'mashrafee' 
 
\t \t }, 
 
\t \t { 
 
\t \t  title:'who invented ac current?', 
 
\t \t  option:['nicola tesla','tomas edison','henry ford','graham bell'], 
 
\t \t  crctAns:'nicola tesla' 
 
\t \t }, 
 
\t \t { 
 
\t \t  title:'who starred in "TRAINING DAY" movie?', 
 
\t \t  option:['danzel washington','morgan freeman','lionerdo decaprio','chirstian bell'], 
 
\t \t  crctAns:'danzel washington' 
 
\t \t } 
 
\t \t ]; 
 
\t \t var setQues=(function(){ 
 
\t \t 
 
\t \t  var index=0; 
 
\t \t  var span=document.createElement('span'); 
 
\t \t \t span.setAttribute('style','color:crimson;font-weight:20px;'); 
 
\t \t \t span.setAttribute('id','myspan'); 
 
\t \t \t var div=document.getElementById('mydiv'); 
 
\t \t \t var btn=document.getElementById('btn'); 
 
\t \t \t 
 
\t \t  
 
\t \t \t return function(){ 
 
\t \t \t  div.innerHTML=''; 
 
\t \t \t  span.innerHTML=ques[index].title; 
 
\t \t \t  div.appendChild(span); 
 
\t \t \t \t div.innerHTML+='</br>'; 
 
\t \t \t  ques[index].option.forEach(function(el,indx,arr){ 
 
\t \t \t  var input=document.createElement('input'); 
 
\t \t \t  input.setAttribute('type','radio'); 
 
\t \t \t \t input.setAttribute('name','question'); 
 
\t \t \t \t input.setAttribute('id',ques[index].option[indx]); 
 
\t \t \t \t 
 
\t \t \t  input.value=el; 
 
\t \t \t \t div.appendChild(input); 
 
\t \t \t \t 
 
\t \t \t \t var label=document.createElement('label'); 
 
\t \t \t \t label.setAttribute('for',ques[index].option[indx]); 
 
\t \t \t \t label.innerHTML=el; 
 
\t \t \t \t  
 
\t \t \t \t 
 
\t \t \t \t div.appendChild(label); 
 
\t \t \t \t input.addEventListener('change',function(e){ 
 
\t \t \t \t 
 
\t \t \t \t  alert(this); 
 
\t \t \t \t \t 
 
\t \t \t \t }); 
 
\t \t \t \t div.innerHTML+='</br>'; 
 
\t \t \t \t 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t (index < ques.length-1) ? (btn.value='next',index++) : (btn.value='start quiz again',index=0); 
 
\t \t \t 
 
\t \t \t  
 
\t \t \t }})() 
 
\t \t 
 
\t \t document.getElementById('btn').addEventListener('click',setQues);

#mydiv{ 
 
\t background:lightblue; 
 
\t border:1px solid skyblue; 
 
\t width:200px; 
 
\t height:200px; 
 
\t box-shadow:-5px 0px 
 
\t  
 
\t } 
 
\t input[type="button"]{ 
 
\t cursor:pointer; 
 
\t } 
 
\t input[type='radio']{ 
 
\t cursor:pointer; 
 
\t } 
 
\t label:hover{ 
 
\t cursor:pointer; 
 
\t }

<h1>quiz</h1> 
 
<div id='mydiv' ></div> 
 
<input type='button' value='start quiz' id='btn'>

Answer 1

Решение

JSFiddle: http://jsfiddle.net/7q81sfd0/15/

Пробовал добавлять слушателей событий до добавления ребенка в DOM, не работал. Прибегает к петле, после того, как все радиокнопки были добавлены к DOM.

var inputRadio = document.getElementsByTagName('input'); 
for(var i = 0; i < inputRadio.length; i++) { 
    if(inputRadio[i].type === "radio") 
    { 
     inputRadio[i].onchange = function() { 
      console.log("clicked "+this.value); 
     };     
    } 
}