javascript - 为什么动态创建的单选按钮没有触发事件监听器

Question

这里是一个简单测验应用程序的一些代码。一个对象数组用于存储问题、选项和正确答案。每个问题都有四个可能的答案，存储在一个数组中。对于这四个选项，我创建了四个动态输入单选元素。四个输入单选元素中的每一个都分配有一个事件监听器。但不知何故，事件监听器没有触发。这可能是什么原因？ 为了方便起见，我给出了实际问题所在的部分:

 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=[
          {
		    title:'who is the captain of bangladesh odi team?',
		    option:['mashrafee','tamim','sakib','mushfic'],
		    crctAns:'mashrafee'
		  },
		  {
		    title:'who invented ac current?',
		    option:['nicola tesla','tomas edison','henry ford','graham bell'],
		    crctAns:'nicola tesla'
		  },
		  {  
		    title:'who starred in "TRAINING DAY" movie?',
		    option:['danzel washington','morgan freeman','lionerdo decaprio','chirstian bell'],
		    crctAns:'danzel washington'
		  }
		  ];
		  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);

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

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