Обработчик 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

Я выяснил, в чем причина проблемы ...

После всего этого кода я добавил немного текста, добавив к innerHTML значение container.По какой-то причине это отбросило все обработчики событий для этого контейнера.

Использование container.appendChild(document.createTextNode("...")); устранило проблему.

Надеюсь, что это поможет любому другому, у кого может быть такая проблема...

Answer 2

У меня работает.Прототип ничего не делает для вас здесь, поэтому я бы предложил отказаться от него.Следующее работает и упрощает вещи:

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 3

Вам нужно использовать $(...) упаковщики?Почему бы и нет:

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.

Answer 4

Вы уверены, что у вас нет ошибок?

craeteElement написано с ошибкой в ​​первой строке.После исправления все это работает на моей машине с 1.6.1 и 1.7RC1.

http://jsfiddle.net/4XWP3/