Discussion :

[dragonfly]

Bonjour,

je viens vers vous car j'ai un petit probléme,

j'ai des objets span avec un listener mouseup défini comme suit.

Code :

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

1
2
3
$(span[a]).bind("mouseup", function(){
	radioCustom.check($(this)[0]);
});

qui fonctionne trés bien, mais lorsque je recharge ma page via un appel AJAX, ce listener ne fonctionne plus (le mouseup ne réagit pas).

J'ai testé le .on, .live mais sans succés (je suis en JQuery 1.8).

Je pense que je ne suis pas la premiére personne a qui ca arrive mais je ne trouve pas de solution sur le net.

Par avance, merci
dragonfly

[danielhagnoul]

Bonjour

Code :

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

1
2
3
4
5
6
7
8
9
10
var mouseUpHandler = function( event ){
    radioCustom.check( event.target );
};
 
//pour : <span><a href."#">Hello</a></span>
 
$( "span > a" ).on( "mouseup", mouseUpHandler );
 
// Dans le "success" de la transaction AJAX, il faut terminer en relançant l'événement
// $( "span > a" ).on( "mouseup", mouseUpHandler );

[dragonfly]

Merci pour ta réponse,

je viens de tester mais lors du rechargement, le mouseup ne fait rien.
J'ai trouvé ceci

Code :

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

1
2
3
4
5
 
$(document).on("mouseup",span[a], function(){
 alert("plop");
 radioCustom.check(this);
});

qui a l'air de fonctionner (le alert s'affiche aprés rechargement mais le this fait référence à "document" et je n'arrive pas à récupérer mon élement span[a] (a est un indice et non la balise <a> ^^).

[Bovino]

Il faut utiliser l'objet event :

Code :

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

1
2
3
4
$(document).on("mouseup",span[a], function(e){
    alert("plop");
    radioCustom.check(e.target);
});

[dragonfly]

Ce fameux objet "e".
C'est vrai que je n'y avais pas pensé.
Du coup, ca marche nickel, je te remercie beaucoup

[dragonfly]

Re,

en fait , ca marche mais pas trop en fait,

ceci fait ce que je lui demande :

Code :

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

1
2
3
4
 
$("span.radio").on("mouseup",function(e){
			     radioCustom.check(e.target);
});

Le probléme c'est que lorsque je clique sur un des span, le code de la fonction se lance 5 fois (j'ai 5 span avec la même classe).
Comme aprés dans ma fonction appelé je créé un flexigrid avec resize auto, il y'a un effet accordeon (du au resize) pendant 5 secondes
Je ne comprends pas pourquoi il agit comme ca (le e.target apparait toujours comme étant celui sur lequel j'ai cliqué).

As-tu une idée de pourquoi ca fonctionne comme ça?

[dragonfly]

Parce que je viens de pondre un code comme ca

Code :

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

1
2
3
4
5
6
7
8
 
var nb="N/A";
$("span.radio").on("mouseup",function(e){
	if(nb=="N/A" || nb!=e.target){
           	radioCustom.check(e.target);
            	nb=e.target;
	}	
});

Ca fonctionne trés bien, mais c'est aussi trééééés moche surtout que je comprend pas pourquoi je suis obligé de passer par ce subterfuge...

P.S : C'est une modification de la librairie custom_radio.js

[danielhagnoul]

La première fois vous nous parlez d'un sélecteur bizarre : $(span[a]).
Maintenant, il s'agit de "span.radio" et d'un comportement étonnant.

Si vous nous donniez les extraits de code HTML et JS (avec la transaction AJAX) réellement utilisé, je pense que l'on y verrait plus clair.

[dragonfly]

le $(span[a]) est un objet span créé comme suit :

Code :

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

1
2
3
4
5
6
7
for(a = 0; a < inputs.length; a++) {
	if(( inputs[a].type == "radio") && inputs[a].className == "styled") {
		span[a] = document.createElement("span");
		span[a].className = inputs[a].type;
		span[a].id = "spanRadio"+a;
	...
}

Mais le probléme c'est que

Code :

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

$(span[a]).on("mouseup",function(e){

ne fonctionne pas au rechargement AJAX de la page(mais lors du premier chargement, ca marche nickel), je l'ai donc remplacé par

Code :

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

$("span.radio").on("mouseup",function(e){

qui lui fonctionne (premier lancement et AJAX) mais se lance autant de fois qu'il y'a d'élements span avec la classe radio

Cf les 2 derniers postes
Aprés l'appel AJAX est le suivant :

Code :

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

1
2
3
4
5
6
7
8
9
$.ajax({
	data : data,
	dataType : C8O.vars.xsl_side === "client" ? "xml":"text",
	success : C8O._onSuccess,
	type : C8O.vars.ajax_method,
	url : C8O.vars.requester_prefix + (C8O.vars.xsl_side === "client" ? ".xml":".cxml"),
        type : C8O.vars.ajax_method,
        dataType : "xml"
});

Le probléme c'est qu'il généré directement via l'API de convertigo (outil basé sur eclipse pour créer des portails web/appli) mais l'appel est de ce type

[danielhagnoul]

Code :

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

1
2
3
4
5
6
7
for( var a = 0; a < inputs.length; a++){
    if ( ( inputs[a].type == "radio") && inputs[a].className == "styled" ){
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;
				span[a].id = "spanRadio"+a;
	...
}

Ce n'est jamais une bonne idée d'utiliser le nom d'un tag HTML pour nommer un objet JS, utiliser plutôt ObjSpans. Attention aux déckarations de variables (var).

Dans ce code, vous pouvez utiliser l'ID des "span" :

Code :

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

1
2
3
4
5
// http://api.jquery.com/attribute-starts-with-selector/
 
$( document ).on( "mouseup", "[id^='spanRadio']", function( event ){
    console.log( this, event.target, event.currentTarget );
});