affecter un événement onClick dynamiquent

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : affecter un événement onClick dynamiquent

Asmodean

Bonjour tout le monde,

Voilà mon problème : J'ai un formulaire dans lequel je peux ajouter des champ texte a volonté grace un un evenement onClick. Quand on clique sur ce bouton un nouveau champ texte apparait avec a coté un bouton Supprimer qui enlève le champ texte (pas n'import lequel, pas le dernier, mais celui à coté du bouton).

Ce que j'ai fait marche très bien sous firefox mais comme par hasard merde sous ie. Rien de mieux qu'un exemple pour mieux comprendre :http://membres.lycos.fr/forumstock/tuto/test.html

Voila mon code js pour ajouter un élément:

Code :

var del = document.createTextNode("Supprimer" ); //Oon a virtuellement crée "Supprimer"
var lien_del = document.createElement("p" ); //On a virtuellement crée <p></p>
lien_del.setAttribute("class","lien" ); //<p></p> devient <p class="lien"></p>
lien_del.setAttribute("className","lien" ); //<p></p> devient <p class="lien"></p> Gestion de l'exception ie, ie ignore la ligne au dessus, ff ignore cette ligne
lien_del.setAttribute("onClick","javascript:del("+count+" )" ); //<a href="test.html"></a> devient <a href="test.html" onClick="javascript:del("+count+" );return false;"></a>
lien_del.onClick = function(){
del(count); //Gestion de la particularité d'ie qui n'accepte pas d'ajouter un evement avec setAttribute. ie ignore la ligne au dessus, ff ignore cette ligne
}
lien_del.appendChild(del); //<a href="test.html" onClick="javascript:del("+count+" );return false;"></a> devient <a href="test.html" onClick="javascript:del("+count+" );return false;">Supprimer</a>

Message édité par Asmodean le 10-01-2006 à 13:34:46

Publicité

anapajari

s/travail/glanding on hfr/gs;

Perso j'aurais fait comme ça:

Code :

var del = document.createTextNode("Supprimer" );
var lien_del = document.createElement("p" );
lien_del.className = "lien";
lien_del.onmouseup = function (){
del(count);
}
lien_del.appendChild(del);

et ça doit marcher sur IE & FF...

Message cité 1 fois

Asmodean

J'ai essayé avec ton code mais la ce ne marche ni sur ff ni sur ie...

il me met del is not a function alors que del est bien définit avant et que je peux l'utiliser avec mon code

anapajari

s/travail/glanding on hfr/gs;

mets un alert à la place tu del tu verras que ça marche!!!

Montre tout ton js, doit y avoir une boulette quelque part!

Asmodean

En effet ça marche...

voila le js

Code :

function del(position){
var text_fieldset = document.getElementById("zone_text" ); //On se place au niveau de notre premier fielset
var labels = text_fieldset.getElementsByTagName("label" );
for(var i=position;i<labels.length;i++){
var label = labels[i];
var input = label.getElementsByTagName("input" )[0];
var lien_del = label.nextSibling;
input.setAttribute("onChange","javascript:refresh("+i+" )" );
input.onChange = "refresh("+i+" )";
lien_del.setAttribute("onClick","javascript:del("+i+" )" );
lien_del.onClick = function (){
del(i);
}
label.firstChild.nodeValue = "Valeur "+i+" ";
}
//Suppression de la zone de texte, du lien et du saut de ligne
var label = text_fieldset.getElementsByTagName("label" )[position-1];
var lien = label.nextSibling;
var br = lien.nextSibling;
text_fieldset.removeChild(label);
text_fieldset.removeChild(lien);
text_fieldset.removeChild(br);
}
function add(){
var count = document.getElementsByTagName("label" ).length; //On compte le nombre d'éléments de type label
var text_fieldset = document.getElementById("zone_text" ); //On se place au niveau de notre premier fielset
count ++; //On incrémente notre compteur parce qu'on rajoute un élément
if (document.all) var ie = true;
//création du label
var nom_label = document.createTextNode("Valeur "+count+" " ); //On crée virtuellement "Valeur x"
var input = document.createElement("input" ); //On crée virtuellement <input />
input.setAttribute("type","text" ); //<input /> devient <input type="text"/>
input.setAttribute("name","nom"+count); //<input type="text"/> devient <input type="text" name="nom"/>
input.setAttribute("onChange","javascript:refresh("+count+" )" ); //<input type="text" name="nom"/> devient <input type="text" name="nom" onChange="javascript:refresh("+count+" )"/>
input.onchange = "refresh("+count+" )"; //Gestion de la particularité d'ie qui n'accepte pas d'ajouter un evement avec setAttribute. ie ignore la ligne au dessus, ff ignore cette ligne
var label = document.createElement("label" ); //On crée virtuellement <label></label>
label.appendChild(nom_label); //On accroche "Valeur x" à la fin des enfants de label (donc au début puisqu'il n'y en a pas)
label.appendChild(input); //On accroche <input type="text" name="nom" onChange="javascript:refresh("+count+" )"/> à la fin des enfants de label
//Création des élement br et p
var br = document.createElement("br" ); //On a virtuellement crée <br />
var del = document.createTextNode("Supprimer" );
var lien_del = document.createElement("p" );
lien_del.className = "lien";
lien_del.onmouseup = function (){
del(count);
}
lien_del.appendChild(del);
//On raccroche ici tous nos éléments virtuelles à une balises de notre fichier XHTML. Ils sont alors afficher
text_fieldset.appendChild(label);
text_fieldset.appendChild(lien_del);
text_fieldset.appendChild(br);
//Ajout d'un élément d'option vide dans notre liste
var liste = document.getElementById("liste_deroulante" );
var select = liste.getElementsByTagName("select" )[0];
var option = document.createElement("option" );
var texte = document.createTextNode("" );
option.appendChild(texte);
select.appendChild(option);
}

Bidem

Code :

function del(position) {...}
...
var del = document.createTextNode("Supprimer" );
del(count);

Cherchez l'erreur...

Spoiler :

A mon avis c'est dangereux de nommer une variable du même nom qu'une fonction

Asmodean

Ben c'était ca qui posait problème merci encore

Alors j'ai une question quand même comme je ne suis pas un fin connaisseur. Je comprend bien le code que tu m'as proposé mais est-ce respectueux des standards les méthodes comme .className au lien d'utiliser un beau setAttribute :whistle: .

Sinon mon premier code marchait mais avec l'evement onmouseup au lieu de onclick...quelqu'un a une explication? ca serait parce que ie ne connait pas onclick pour un objet <p>?

Message édité par Asmodean le 10-01-2006 à 14:47:46

NounouRs

Non parce que c pas mon pied !

anapajari a écrit :

Perso j'aurais fait comme ça:

Code :

var del = document.createTextNode("Supprimer" );
var lien_del = document.createElement("p" );
lien_del.className = "lien";
lien_del.onmouseup = function (){
del(count);
}
lien_del.appendChild(del);

et ça doit marcher sur IE & FF...

Juste une remarque : le
lien_del.onmouseup = function (){
del(count);
}
ca provoque du memory leak, javascript utilise DOM pour faire un lien vers du javascript qui plus est, une fonction inline, c'est à eviter

voir :
http://forum.hardware.fr/forum2.ph [...] w=0&nojs=0

Message édité par NounouRs le 22-11-2007 à 12:20:06

FORUM HardWare.fr

Programmation

HTML/CSS

affecter un événement onClick dynamiquent

Sujets relatifs
OnClick=évenement, clic ailleurs=fin d'évenement, comment faire ?	peut-on mettre un "onclick=...." dans PHP ?
[JAVA] Evenement utilisateur.	Scrolling Automatique par évenement onmouseover ?
[Réglé] Balise div et évènement onmouseout ???	Affecter une icone à un type de fichier en batch
ActionScript -> Problème d'envoi de fonction sur évenement	[Access / SQL / SGBD] Evenement clic sur controle onglet ! help plz
[JS] Problem avec onclick
Plus de sujets relatifs à : affecter un événement onClick dynamiquent

Page générée en 0.091 secondes