Ajout dynamique onclick et auto-execution

Version imprimable

Bonjour,
Apres avoir parcouru le forum à la recherche d'une réponse à mon problème
Je me permet de poster ma question ici :

Je souhaite ajouter dynamique à des <img ../> un evenement onclick. Pour cela, j'ai essayé les différentes méthodes qui suivent :

img.onclick = nom_fonction(param1,param2)

==> la fonction s'execute sans atteindre le click sur l'imag
img.onclick = fonction(){nom_fonction(param1,param2)}

==> la console javascript n'accepte pas cette syntaxe
img.addAttribute('onclick','nom_fonction('+param1+','+param2+')')

==> fonction uniquement sur firefox
Code:

1 2 3 4 5 6 if (del.addEventListener){ //firefox del.addEventListener('click',deleteGalerie(idLog,idPhoto), false); } else if (del.attachEvent) { //IE del.attachEvent('onclick', deleteGalerie(idLog,idPhoto)); }
==> la fonction s'execute automatiquement sur les deux navigateurs

Finalement aucune des différentes methodes ne fonctionnent :(

Voici le code des fonctions concernées :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 function deleteGalerie(idLog,idPhoto){ var req = new Ajax.Request("/ajax.php?action=deleteGalerie&idLog="+idLog+"&idPhoto="+idPhoto,{ method: 'get', onSuccess: function(transport) { document.getElementById("thumbnails_galerie").innerHTML=""; afficheGalerie(idLog); } }); } function addImage(idLog,idPhoto,desc){ var del = document.createElement("img"); var photo = document.createElement("img"); var divP = document.createElement("div"); del.src = "/img/del.png"; del.className="g_del"; divP.className="g_div"; del.style.cursor="pointer" source = "/upload.php?action=affiche&objet=logiciel-galerie&id="+idLog+"&idPhoto="+idPhoto; photo.src = source+'&'+new Date()*Math.random(); photo.id = idLog+'_'+idPhoto; if (del.addEventListener){ //firefox del.addEventListener('click',deleteGalerie(idLog,idPhoto), false); } else if (del.attachEvent) { //IE del.attachEvent('onclick', deleteGalerie(idLog,idPhoto)); } divP.appendChild(photo); divP.appendChild(del); document.getElementById("thumbnails_galerie").appendChild(divP); //del.onclick = function(){deleteGalerie(idLog,idPhoto)} new Tip(idLog+'_'+idPhoto, desc,{ className: 'darktip' } ); }
Si quelqun a une idée d'où peut venir ce probleme, je suis preneur :D
Merci d'avance.

22/01/2008, 09h08
SpaceFrog

essaye :

Code:

img.onclick = fonction(param1,param2){nom_fonction(param1,param2)}
22/01/2008, 09h18
chjerome

Merci d'essayer de m'aider.

Pour la solution : je viens de tester, et cela produit aussi une erreur dans la console et empeche le fonctionnement des apps tels que Windows Prototype
22/01/2008, 09h25
le_chomeur

Bizare ...
que se passe t-il lorsque tu clicks sur ton image sans rien implémenté comme méthode ? il y a déja une méthode ajouté par prototype ??

ps : mon 200 eme post :mouarf::mouarf:
22/01/2008, 09h46
SpaceFrog

ne précise pas les arguments au niveau du onclick, mais récupères les dans la fonction avec arguments ...

Code:

img.onclick = fonction(){nom_fonction()}

et dasn la fonction:

Code:

alert(arguments[0])

A le_chomeur :

Citation:

que se passe t-il lorsque tu clicks sur ton image sans rien implémenté comme méthode ?

Il ne se passe rien du tout

Citation:

il y a déja une méthode ajouté par prototype ??

C'est à dire ?

A SpaceFrog

Citation:

ne précise pas les arguments au niveau du onclick, mais récupères les dans la fonction avec arguments ..

J'ai tenté cette methode, mais, mais les arguments que je recupere sont undefined. De plus, il me semble que l'execution automatique a toujours lieu après queque tests.

J'ai egalement testé ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function deleteGalerie(){ idLog = arguments[0] idPhoto = arguments[1] alert(idLog+"+"+idPhoto) [...] } function addImage(idLog,idPhoto,desc){ [...] if (del.addEventListener){ //firefox del.addEventListener('click',deleteGalerie(idLog,idPhoto), false); } else if (del.attachEvent) { //IE del.attachEvent('onclick', deleteGalerie(idLog,idPhoto)); } [...] }
Cela fonctionne, mais de meme que pour les autre cas, la fonction deleteGalerie s'execute immédiatement.

23/01/2008, 11h23
chjerome
En fait, la seul syntaxe qui marche est :
Code:

1 2 del.writeAttribute('onclick','deleteGalerie('+idLog+','+idPhoto+')')
Malheureusement, elle n'est compatible qu'avec Firefox, ce qui me semble bizarre, vu qu'elle est tiré du framework Prototype

http://www.prototypejs.org/api/eleme...writeattribute

Il me semble que, pour que l'execution ne se fasse pas automatiquement, il faille fournir le nom de la fonction sous forme de chaine de caractere, mais ce n'est helas pas compatible avec toutes les syntaxes.

Déclare le code suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Function.prototype.bind = function(__object) {
    var method = this;
    var oldArguments = entries(arguments).slice(1);
    return function () {
        var newArguments = entries(arguments);
		return method.apply(__object, oldArguments.concat(newArguments));
    };
}
 
function entries(__collection) {
	var result = [];
	for (var i = 0; i < __collection.length; i++)	result.push(__collection[i]);
	return result;
}

Et dans ta fonction addImage, déclare le onclick de cette façon

Code:

1
2
 
del.onclick = deleteGalerie.bind(this, idLog, idPhoto);

24/01/2008, 18h50
chjerome
Merci pour ta reponse psychomatt.

J'ai egalement trouvé un autre solution :

utiliser une methode de prototype :
Code:

1 2 3 4 Event.observe(suppr, 'click', function() { supprGalerie(idLog,idPhoto) });
Encore merci a tout ceux qui ont essayé de m'aider