动态添加单选按钮onclick事件不起作用？

Question

我正在尝试跟随,1.从用户选择中使用Ajax获取响应,它返回单选按钮属性列表为2.一旦我获得属性列表,我使用createElement()创建单选按钮3.然后我附加用于onclick按钮的单选按钮的事件.4.然后我使用appedChild将元素添加到DOM

以下是添加单选按钮的代码(用于IE)

var radio = '<input ';
radio += 'type ="radio" ';
radio += 'id="' + id + '" ';
radio += 'value="" ';
radio += '/>';
radioButton = document.createElement(radio);
radioButton.onClick = function(){alert('this is test')}
ele.appendChild(radioButton);
ele.innerHTML += 'none' + '<br/>';

现在在所有这些当我添加单选按钮到DOM onclick不工作,我不明白为什么？

谢谢大家

Answer 1

您可以通过两种方式动态地将en元素添加到DOM:通过将html代码插入父元素或通过创建具有某些属性的子元素.在你的例子中,这两种方法是混合的 - 因此毫无意义.

方法1.插入HTML代码:

var radio = '<input type ="radio" id="' + id + '" value="" />';
ele.innerHTML = radio;
document.getElementById(id).onclick = function(){ alert('this is test'); };

方法2.创建DOM子级:

var radioButton = document.createElement('input');
radioButton.type = "radio";
radioButton.id = id;
radioButton.onclick = function(){ alert('this is test'); };
ele.appendChild(radioButton);