Discussion :

[Sayrus]

Bonjour,

Je suis à fond dans le JQuery en ce moment mais je me heurt souvent à des problèmes pour lesquels je ne parviens pas à trouver de réponses...

Mon problème est le suivant:

Je souhaite créer dynamiquement des éléments et donc associé à chaque élément un "colorbox" spécifique...

Pour ce faire j'utilise la fonction suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$("#form_items .tool").live('click',function(){
 
	$(".box").css({'display':'none'});
	var currentId=$(this).attr('id');
	var numId=currentId.split('-');
	numId=numId[1];
 
	$("#box-"+numId).css({'display':'block'});
	$(this).colorbox({width:"500px", inline:true, href:".fieldBox"});	
});

Lorsque je clique la première fois sur l'élément dynamique censé lancer le colorbox, ça ne marche pas...

Dès le deuxième clic et +, ça fonctionne très bien!

Pourquoi le colorbox ne se lance pas au premier clic? Que puis-je faire pour corriger le tir?

merci.

[llaffont]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$("#form_items .tool").live('click',function(){
 
	$(".box").hide();
	var currentId=$(this).attr('id');
	var numId=currentId.split('-');
	numId=numId[1];
 
	$("#box-"+numId).show();
	$(this).colorbox({width:"500px", inline:true, href:".fieldBox"});	
});

Ton évènement tu la déclaré dans $(function(){} ou dans un fonction à part ?

[Sayrus]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$("#form_items .tool").live('click',function(){
 
	$(".box").hide();
	var currentId=$(this).attr('id');
	var numId=currentId.split('-');
	numId=numId[1];
 
	$("#box-"+numId).show();
	$(this).colorbox({width:"500px", inline:true, href:".fieldBox"});	
});

Ton évènement tu la déclaré dans $(function(){} ?

oui bien sûr dans le $(document).ready

[llaffont]

J'ai déjà rencontré le problème mais je me souviens plus comment je l'ai résolu...
Il me semble que j'avais laissé tombé le live ou que c'était une erreur dans le code qui n'avait rien a voir avec la function. (Dsl ! Je ne suis pas d'une grande aide)

Simuler un click ($("#form_items .tool").click()) après chaque création dynamique reviendrait à cliquer sur tout les éléments ceux qui ne marche pas comme ceux qui vont fonctionner par la suite

Tu crée bien tes nouveaux éléments par DOM et non par une injection AJAX ?

[Sayrus]

Oui bien sûr il n'y a pas d'Ajax...

par contre j'ai trouvé comment contourner le problème...

Pour les éléments créés dynamiquement, j'initialise colorbox une fois dans la fonction "stop" du "draggable"

Et je l'initialise une seconde fois dans le "live('click', ..."

Ainsi ça fonctionne du premier coup... mais bon, je trouve ça un peu dommage de ne pas avoir quelque chose d'encore plus simple...

[llaffont]

C'est pour ça que par moment j'utilise cette bonne vieille combine :

Pourquoi les événements disparaissent après une mise à jour avec AJAX ?

Tu déclare tes évènements dans une fonction à part que tu appel chaque fois que initialise un changement sur ta page.

[Sayrus]

Ok j'en prends bonne note! Je ne suis pour l'instant pas encore à la sauvegarde mais j'y arrive

Merci!