Eseguire Javascript su dati caricati da ajax

[Protooler]

Ciao a tutti..dovrei eseguire una funzione all'hover dei link con classe eventTitle
il problema è che questi dati vengono caricati da ajax e quindi includento il file js nella pagina in questo modo: <script type='text/javascript' src='../js/mioscript.js'></script>non funziona..

mioscript.js

$(function(){

	$('.eventTitle a').hover(
		function(e){
			
			var theSingleEvent = $(this).parent().parent().parent();
			hoverTimer = window.setTimeout(
				function(){
					if( $('.openEvent').length != 0 )
					{
						$('.openEvent').removeClass('openEvent').animate({height: '32px'}, 500, 'swing').
							find('ul.briefDetails').fadeIn(250).
						end().
							find('ul.details').fadeOut(500);
					}
					theSingleEvent.addClass('openEvent').animate({height: '137px'}, 500, 'swing').
						find('ul.briefDetails').fadeOut(250).
					end().
						find('ul.details').fadeIn(500);
				}, 500
			);
		},
		function(){
			clearTimeout(hoverTimer);
		}
	);

});

ho provato ad includerlo nel file php che mi restituisce i dati richiesti via ajax ma ogni volta che eseguo la funzione ajax mi carica lo script..e se eseguo l'hover sui link me duplica l'effetto quante volte è stato caricato il js..
Come fare?

[Vindav]

prova ad usare il metodo on() di jquery

$(document).on('hover', '.eventTitle a', function(e){
...
});

[Protooler]

ciao vindav!
ho provato così ma senza risultato..

	$(document).on('hover', '.eventTitle a', function(e){
			
			var theSingleEvent = $(this).parent().parent().parent();
			hoverTimer = window.setTimeout(
				function(){
					if( $('.openEvent').length != 0 )
					{
						$('.openEvent').removeClass('openEvent').animate({height: '32px'}, 500, 'swing').
							find('ul.briefDetails').fadeIn(250).
						end().
							find('ul.details').fadeOut(500);
					}
					theSingleEvent.addClass('openEvent').animate({height: '137px'}, 500, 'swing').
						find('ul.briefDetails').fadeOut(250).
					end().
						find('ul.details').fadeIn(500);
				}, 500
			);
		},
		function(){
			clearTimeout(hoverTimer);
		}
	);

[Vindav]

prova cosi:

$(document).on({
mouseenter: function(){ //corrisponde alla prima funzione nel tuo codice
...
},
mouseleave: function(){ //corrisponde alla seconda funzione nel tuo codice
...
}
}, '.eventTitle a');

che versione di jquery stai includendo? se è minore della 1.7 il metodo on non funziona

[Protooler]

Perfetto..ho incluso la 1.7 e in questo modo funziona perfettamente!!!
Grazie

[whisher]

Originariamente inviato da Protooler
Perfetto..ho incluso la 1.7 e in questo modo funziona perfettamente!!!
Grazie

non è questione di versione si chiama
event delegation

[Protooler]

si si..chiarissimo grazie, ora me la studio!!!

[Vindav]

la versione 1.7 di jquery ha incluso l'uso del metodo on al posto dei metodi live/delelgate. Quindi con versioni minori dell' 1.7 avresti dovuto usare uno dei due metodi sopra citati. In entrambi i casi si tratta cmq di event delegation.

[Protooler]

ok..
allo stesso modo sto provando ad includere Cufon

<script src="http://cufon.shoqolate.com/js/cufon-yui.js" type="text/javascript"></script>
<script src="js/bebas-neue.cufonfonts.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h2', { fontFamily: 'Bebas Neue', hover: true });
Cufon.replace('h3', { fontFamily: 'Bebas Neue', hover: true }); 
Cufon.replace('#eventHeaderRow ul li', { fontFamily: 'Bebas Neue', hover: true });
</script>

ma mentre per la parte presente nella pagina non ho problemi alla parte caricata da ajax non riesco ad applicarlo..