javascript - onclick 处理程序不会触发使用 document.createElement 创建的复选框

Question

我要疯狂地试图找出为什么这不起作用。我正在使用 JS 动态创建一个复选框来启用/禁用文本字段(也是动态创建的)。

代码非常简单:

var text = $(document.createElement("input"));
text.type = "text";
container.appendChild(text);

...

var check = $(document.createElement("input"));
check.type = "checkbox";
check.onclick = function(event) {
    if (this.checked) text.enable();
    else text.disable();
};
container.appendChild(check);

我尝试将事件处理程序放在 container.appendChild(check); 之后，但这会产生相同的结果。

没有JS错误，在Chrome、FF3.6、IE7中结果相同。

谁能解释一下为什么这不起作用？如有任何修复，我们将不胜感激。

奇怪的是(因为理论上它应该与上面相同)，添加以下内容(在 container.appendChild(check); 之后)有效(复选框位于页面第一个):

$$("input[type=checkbox]")[0].onclick = function(event) {
    if (this.checked) text.enable();
    else text.disable();
};

我真的不喜欢这个，因为它看起来“肮脏”，并且该复选框可能不是稍后页面上的第一个......

顺便说一句，$ 和 $$ 来自 Prototype。

预先感谢您的帮助。

Answer 1

我找出了导致问题的原因...

在完成所有这些代码之后，我通过附加到container 的innerHTML 来添加一些文本。由于某种原因，这会引发该容器的所有事件处理程序。

使用 container.appendChild(document.createTextNode("...")); 解决了问题。

希望这对可能遇到此类问题的其他人有所帮助......