[JQuery] ... perché l'evento non si ripete?

[simo_JQ]

E' stato difficile dare un titolo, il problema è facile da capire ma difficile da spiegare.

il modo migliore è che andiate qui:

Esempio errore

(Ho preso una pagina Jquery già fatta che in sostanza crea un piccolo sito (mono-pagina) per navigare un portfolio senza l'uso di PHP ( ))


Qual'è il problema?
Nella pagina sulla destra c'è una piccola galleria di immagini che viene caricata da JQ. Se si va in mouseover su una delle miniature cambierà automaticamente l'immagine al centro della pagina.
{cambiando il bordo della miniatura in modo da sapere che è stata selezionata}

Questo succede perché c'è un javascript in fondo all'HTML che legge gli attrbuti TITLE E ALT dell'immagne e li riporta nel SRC dell'altra immagine sotto forma di URL in cui TITLE è la root e ALT è il nome del file da caricare.

$(".gal_img").mouseover(function(){
 			var direct= $(this).attr("title");
 			var file =$(this).attr("alt");
 			$(this).css('border', '#ccc solid 2px');
 			hoverchange(direct,filen);
 	});

la funzione hoverchange() è:

function hoverchange(my_root,my_fname){
 	$("#pg_preview > img[title="+my_root+"]").attr("src","images/"+my_root+"/medium/"+my_fname+".png");
 	$("#pg_preview > img[title="+my_root+"]").attr("alt","images/"+my_root+"/large/"+my_fname+".png"); 
}

che lavorano su questo HTML:

<div id="gal" style="visibility: visible;">
	<div id="gal_title">*titolo*</div>
	<span class="gal_span">
		[img]images/ball/thumbs/ball1.png[/img]
	</span>
</div>

*questo HTML viene creato da una funzione che poi viene richiamata per ricrearlo nuovamente quando viene cliccato a sinistra un altro progetto.

E fin qui, tutto OK.
Il problema sopraggiunge quando clicchiamo su un altro progetto così facendo cambiamo gli elementi caricandone di nuovi, nonstante non cambi nulla a livello di HTML, perché la funzione che la genera è la medesima, la galleria sulla destra che prima faceva cambiare l'immagine a centro pagina NON lo fa più.

Come se l'evento collegato alla classe dell'immagine non funzionasse (primo codice inserito).

AVETE IDEE??

è veramente difficile spiegare.
Provate a vedere la pagina...

{è tutto comunque in fase sperimentale}

[Vindav]

Il sito di esempio che hai postato mostra questo errore : "jQuery is not defined", dando un occhiata al codice ho visto che fai uso del plugin fancybox.

Fancybox per funzionare richiede l'import della libreria jquery, l'import deve avvenire prima di utilizzare il plugin fancybox mentre nella pagina viene importato alla fine... magari il problema è questo, ti consiglio di sistemare e vedere se ti da ancora lo stesso problema.

[simo_JQ]

OK, gusto.

Ho spostato tutto in modo che JQ venga caricato nell'head. Che comunque non è male, in ogni caso non è quello che dava problemi, quel plug-in non era utilizzato.

Ho provato a spostare come dici tu ma non è servito...

Ripeto il problema credo sia nel fatto che il selettore $(".gal_img") dopo che ricarico quel contenuto NON seleziona più le nuove immagini nonostante abbiano la stessa classe.

[bionicoz]

E' normale, i nuovi elementi non hanno nessun evento associato. devi rilanciare

$(".gal_img").mouseover(function(event){
   var direct = $(this).attr("title");
   var filen = $(this).attr("alt");
   $(this).css('border', '#ccc solid 2px');
   hoverchange(direct,filen);
});

dopo che hai modificato l'html.

PS: ti consiglio di dare un'occhiata al metodo live() di jquery, che semplifica la vita proprio per queste situazioni.

[simo_JQ]

*__* grazie mille bionicoz, quando arrivo a casa ci provo, era giusto quello che pensavo ma non sapevo NE COME SPIEGARMI ne dove cercare la soluzione.

Do un'occhiata a quel metodo e poi vi informo se ci sono riuscito. adoro il Forum di HTML.it (devo smetterla di perdere le pass) ahahahaahahahhahahhaahah...

A presto.

[simo_JQ]

Originariamente inviato da bionicoz
E' normale, i nuovi elementi non hanno nessun evento associato. devi rilanciare

$(".gal_img").mouseover(function(event){
   var direct = $(this).attr("title");
   var filen = $(this).attr("alt");
   $(this).css('border', '#ccc solid 2px');
   hoverchange(direct,filen);
});

dopo che hai modificato l'html.

PS: ti consiglio di dare un'occhiata al metodo live() di jquery, che semplifica la vita proprio per queste situazioni.

ho provato e tutto ha funzionato a meraviglia... GRAZIE