Javascript 为什么动态创建的单选按钮不触发事件侦听器

下面是一个简单测验应用程序的一些代码。一个对象数组用于存储问题、选项和正确答案。每个问题有四个可能的答案，它们存储在一个数组中。对于这四个选项，我创建了四个动态

输入无线电元素

。四个输入无线电元素中的每一个都被分配了一个事件侦听器。但不知何故，事件侦听器没有触发。这可能是什么原因？ 为方便起见，我给出了实际问题所在的部分：

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

测验

解决方案

JSFiddle：

尝试在将子项附加到

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

var-inputRadio=document.getElementsByTagName（'input'）；
对于（变量i=0；i

您可以先从代码中删除**，使其运行。在将事件侦听器附加到html

DOM

@user3138436之前，您应该将其附加到

无线电输入中，如果您将第一个
**
替换为
/*
，将第二个替换为
*/
@mplungjan，则是为了在该站点中使文本加粗。但它不起作用。我将其从代码中删除了**。是为了该站点使文本加粗。它不在我的实际代码中。仍然不起作用。您测试了吗？-它没有改变：修改了我的答案。希望有人能告诉我们为什么事件处理程序不能处理变量。如果我提供的代码不能以这种方式工作，那么为什么它能工作呢？只是我无法用手指触摸它。我看到的唯一区别是范围。你能解释一下与范围界定相关的问题吗？