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

Question

我正在尝试以下操作： 1. 通过Ajax从用户选择获取响应，返回单选按钮属性列表。 2. 获取属性列表后，使用createElement()创建单选按钮。 3. 为单选按钮附加onclick事件。 4. 最后使用appendChild将元素添加到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中时，单击事件不起作用，我不明白为什么？

谢谢大家。

- Anil Namde

Answer 1

您可以通过两种方式动态向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);

- Zenya

Answer 2

该属性名为onclick而非onClick。

- Quentin