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

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

BTW，$和$$来自Prototype。

提前感谢您的帮助。

Answer 1

我弄清楚导致问题的原因......

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

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

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

Answer 2

您确定没有任何错误吗？

craeteElement在第一行拼写错误。修好之后，它全部在我的机器上运行1.6.1和1.7RC1。

http://jsfiddle.net/4XWP3/

Answer 3

适合我。原型在这里没有为你做任何事，所以我建议放弃它。以下工作简化了事情：

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

...

var check = document.createElement("input");
check.type = "checkbox";
check.onclick = function(event) {
    text.disabled = !this.checked;
};
container.appendChild(check);

Answer 4

您需要使用$(...)包装器吗？为什么不：

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

另请注意，我将if (this.checked)更改为if (check.checked)，因为this可能会在JS中疯狂。

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

4 个答案: