Discussion :

[Metal29]

Bonjour à tous et bonnes fêtes de fin d'année!
Je commence en JQuery (et en plus je suis limité à la version 1.10.2 pour des raisons d'infra) et je me retrouve avec un problème qui me rend chèvre...
J'ai un DIV d'entête sur lequel je peux cliquer pour ouvrir ou fermer la section en dessous et sur ce DIV d'entête, j'ai rajouté un img sur lequel je clic pour lancer une fonction Js ouvrant un popup.

Code HTML :

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

1
2
3
4
5
6
7
8
9
                                            <div id="CollapsiblePanel_SiteGeo_<%=nb_site_geo%>" class="CollapsiblePanel">
                                                <div id="CollapsiblePanelTab_SiteGeo_<%=nb_site_geo%>" class="CollapsiblePanelTab_SiteGeo_detail" tabindex="0" style="font-size:12px;">
                                                <table width="100%">
                                                	<tr>
                                                   	  <td><img src="../images/fleche_coudee_b.png" height="8" /><%=nb_site_geo%> - <%=Res_site_geo(1)%> <img src="../images/folder.png" height="20" onclick="lance_explorateur_sitegeo('<%=Res_site_geo(1)%>', '<%=nb_site_geo%>', event);" />
                                                       &nbsp;</td>
	                                                </tr>
                                                </table>
                                                </div>

Le problème c'est que quand je clic sur mon img, l'event se propage jusqu'au DIV d'entête et ouvre ou ferme le div du dessous en même temps.
J'ai donc essayé de bloquer la propagation par défaut (ça ça fonctionne) mais par contre une fois le popup ouvert, je ne peux plus ouvrir ou fermer la section du dessous en cliquant sur le div d'entête!

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	function lance_explorateur_sitegeo(valeur, nb_site_geo, e) {
		$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).unbind();
		$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).click(function(e){
			e.stopImmediatePropagation();
		});
 
		//ouverture du popup
 
		$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).bind("click", function() {
		  $("#Panel_SiteGeo_"+nb_site_geo).slideToggle( "fast" );
		});
	}

Une idée ou une autre approche à me proposer ? (autre que de déplacer l'ouverture / fermeture du DIV ailleurs que sur le DIV d'entête ^^)

Merci d'avance!

[NoSmoking]

Bonjour,
modifie la logique de ton code

Code :

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

1
2
3
4
5
function lance_explorateur_sitegeo(valeur, nb_site_geo, e) {
  // on ne va pas plus loin dans l'arbre
  e.stopPropagation();
  // là tu mets le code de ta fonction();
});

et en dehors de celle-ci

Code :

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

1
2
3
$("#CollapsiblePanelTab_SiteGeo").on("click", function() {
  $("#Panel_SiteGeo_" + nb_site_geo).slideToggle("fast");
});

[Metal29]

Bonjour,

Désolé je n'ai pas recu de notif pour me prévenir de la réponse...

En fait le 2ème extrait du code je l'ai déjà initialisé dans ma page. C'est juste que le fait de faire un unbind me force à réinplémenter la fonction suite à l'action...

Et si je ne fais qu'un e.stopPropagation() et donc pas d'unbind, ça n'arrête pas le traitement de réduction de la zone...

Merci d'avance et encore désolé pour le délais de réponse!

[NoSmoking]

... ça n'arrête pas le traitement de réduction de la zone...

si j'ai bien compris, regarde du côté de jQuery.stop() avant de lancer ton animation.

[Metal29]

Meilleurs voeux à tous.
De retour de vacances je reprends le dossier...
J'ai essayé de mettre un stop() sur mon début de fonction mais sans succès:

Code :

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

1
2
3
4
5
 
function lance_explorateur_sitegeo(valeur, nb_site_geo, e) {
   $("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).stop();
   //ouverture du popup
}

L'animation se poursuit toujours...
J'ai essayé avec

Code :

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

$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).stop(true, true);

même résultat...

[Toufik83]

Salut,
il est ou ton élément ayant l'id commençant par #Panel_SiteGeo_ dans ton code html ?

le mieux est de faire un (CTRL+U) et montre nous le code source html généré de la page.