Jquery non funziona con contenuto da AJAX

**Alhazred** · 19-09-2010, 19:32

E' la prima volta che mi cimento con JQuery e c'è una cosa che non mi riesce, in realtà non so se non riesce perché sbaglio qualcosa o perché proprio non si possa fare.

Ecco il problema.
Ho nel sito una pagina principale nella quale cambio il contenuto tramite AJAX cliccando sul menu.

Appena si arriva sulla home del sito vengono inclusi vari file js, tra cui anche jquery.
Il contenuto iniziale è del semplice testo.
Clicco su una voce di menu e questa rimpiazza il testo con 3 immagini in bianco e nero affiancate, sotto ogni immagine ce n'è una uguale a quella in primo piano, ma a colori.
Tramite il codice che ho trovato qui, quando si passa su un'immagine scompare gradualmente quella in b/n per lasciare spazio a quella a colori.

Il problema è che se uso AJAX per richiamare le immagini, lo script JQuery non funziona.
Funziona tutto regolarmente invece se creo una pagina html con già dentro le immagini sulla quale vado con un normale link (ricaricando quindi completamente la pagina).

E' normale che una cosa così non funzioni? C'è un modo perché possa lasciare tutto in AJAX invece di passare ai classici link html?

**Alhazred** · 19-09-2010, 19:47

Forse ho capito quale sia il problema, ma non so come risolverlo.

Ho visualizzato il codice della pagina dopo aver cliccato il link che mi fa apparire le immagini, il codice resta quello della pagina iniziale, quello con il solo testo, quindi lo script JQuery non trova gli elementi su cui lavorare.

Si risolve questo problema?

**br1** · 19-09-2010, 20:22

http://forum.html.it/forum/showthrea...8#post12990658

ciao

**Alhazred** · 19-09-2010, 22:12

Se non ho capito male, per usare .live(), è richiesto che nella pagina di partenza ci sia già un elemento con stessa classe o stesso tipo di quello sul quale poi lavorare.
Nel mio caso così non è, quindi neanche così funziona.

Riporto il codice che ho, così magari qualcuno sa darmi qualche dritta.

Pagina principale

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
   <title>Title here</title>
	
   Qui ci sono vari file js e css

   
   <script type='text/javascript'>
      $(document).ready(function(){
         $("img.sopra").hover(
            function() {
               $(this).stop().animate({"opacity": "0"}, "slow");
            },
            function() {
               $(this).stop().animate({"opacity": "1"}, "slow");
            }
         );		 
      });
   </script>
	
</head>
<body>
<div id="container">
   <div id="header">LOGO</div>
      <div id="navigation">
         <ul id="hor">[*]Home[*]Storia[*]contatti[*]Prodotti[/list]
      </div>
   <div class="clear"></div>
   <div id="content">
      <?php include("home.html") ?>
   </div>
   <div id="footer">Footer</div>
</div>
</body>
</html>

file con le immagini che verrà chiamato tramite AJAX

Codice PHP:


<div class="fadehover">

   <div class="cover">

      [url="#"][img]images/cover/immagine1.jpg[/img][/url]

      [url="#"][img]images/cover/immagine1_bw.jpg[/img][/url]

   </div>

   <div class="cover">

      [url="#"][img]images/cover/immagine2.jpg[/img][/url]

      [url="#"][img]images/cover/immagine2_bw.jpg[/img][/url]

   </div>

   <div class="cover">

      [url="#"][img]images/cover/immagine3.jpg[/img][/url]

      [url="#"][img]images/cover/immagine3_bw.jpg[/img][/url]

   </div>

</div>

Come dovrei modificare il codice affinché funzioni?

**Alhazred** · 20-09-2010, 22:54

Sto provando con questo codice, ma ancora non va.
A nessuno è mai capitato di dover fare una cosa simile?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Title here</title>

   

    <script type='text/javascript'>
        function requestPage(strPageName){
            $('#content').load(strPageName,fx(0,"slow"));
        }

        function fx(strOpac,strSpeed){
             $("img.sopra").hover(function() {
                   $(this).stop().animate({"opacity": strOpac}, strSpeed);
                },
                function() {
                   $(this).stop().animate({"opacity": "1"}, "slow");
                }
             );
        }

    </script>

</head>
<body>
<div id="container">
    <div id="header">LOGO</div>
    <div id="navigation">
        <ul id="hor">[*]Home[*]Storia[*]Comnicazioni[*]Prodotti[/list]
    </div>
    <div class="clear"></div>
    <div id="content">
        <?php include("home.html") ?>
    </div>
    <div id="footer">Footer</div>
</div>
</body>

prodotti.php

codice:

<div id="prod1">
    [img]images/cover/immagine1_bw.jpg[/img]
</div>
<div id="prod2">
    [img]images/cover/immagine2_bw.jpg[/img]
</div>
<div id="prod3">
    [img]images/cover/immagine3_bw.jpg[/img]
</div>

**Xinod** · 21-09-2010, 00:56

$('#content').load(strPageName,function(){fx(0,"sl ow")});

comunque live non ha bisogno che ci sia gia' un elemento coperto dal selettore alla prima esecuzione
e comunque esiste anche
http://api.jquery.com/delegate/

ciao

**Alhazred** · 21-09-2010, 09:52

Grazie mille, funziona

Discussione: Jquery non funziona con contenuto da AJAX

Strumenti discussione

Ricerca discussione

Visualizza

Jquery non funziona con contenuto da AJAX

Permessi di invio