Event plus pris en compte aprés refresh AJAX

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:

---

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

Bonjour

Code:

---

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 );

---

Merci pour ta réponse,

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

Code:

---

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> ^^).

Il faut utiliser l'objet event :

Code:

---

1 2 3 4

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

---

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

Re,

en fait , ca marche mais pas trop en fait,

ceci fait ce que je lui demande :

Code:

---

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?

Parce que je viens de pondre un code comme ca

Code:

---

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

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.

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

Code:

---

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:

---

$(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:

---

$("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:

---

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

Code:

---

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:

---

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 ); });

---