javascript - 动态添加的单选按钮 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);