Le gestionnaire onclick ne se déclenche pas pour la case à cocher créée avec document.createElement

Question

Je deviens fou en essayant de comprendre pourquoi cela ne fonctionne pas. Je crée une checkbox dynamiquement avec JS pour activer/désactiver un champ de texte (également créé dynamiquement).

code

est assez simple:

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

J'ai essayé de mettre le gestionnaire d'événements après container.appendChild(check);, mais qui donne le même résultat.

Il n'y a pas d'erreur JS et les résultats sont identiques dans Chrome, FF3.6 et IE7. Est-ce que quelqu'un peut expliquer pourquoi cela ne fonctionne pas? Toutes les corrections seraient appréciées.

Étrangement (parce que, théoriquement, il devrait être le même que ci-dessus), en ajoutant les éléments suivants (après container.appendChild(check);) fonctionne (case à cocher est d'abord à la page):

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

Je ne aime pas vraiment cela, comme semble "sale", et la case à cocher peut ne pas être la première sur la page plus tard ...

BTW, $ et $$ sont de Prototype.

Merci d'avance pour toute aide.

Answer 1

je me suis dit ce qui était à l'origine du problème ...

Après tout ce code, j'ajoutais un texte en ajoutant à innerHTML de container. Pour une raison quelconque, cela a rejeté tous les gestionnaires d'événements pour ce conteneur.

L'utilisation de container.appendChild(document.createTextNode("...")); a permis de résoudre le problème.

Hope this helps toute autre personne qui pourrait être d'avoir ce genre de problème ...

Answer 2

Etes-vous sûr de ne pas avoir d'erreur?

craeteElement est mal orthographié dans la première ligne. Après avoir réglé cela, tout fonctionne sur ma machine avec 1.6.1 et 1.7RC1.

http://jsfiddle.net/4XWP3/

Answer 3

Works pour moi. Prototype ne fait rien pour vous ici, alors je vous suggère de le laisser tomber. Les travaux et les choses suivantes: simplifie

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

Avez-vous besoin d'utiliser les emballages $(...)? Pourquoi ne pas:

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

Notez également que j'ai changé if (this.checked) à if (check.checked) depuis this peut devenir fou à JS.