jQuery and content from AJAX call
I'm creating a one-column site which has only one div where I show the content.
The links in the menu call the content to show through AJAX, everything is ok whith this.
The problem starts when I call a page whith 3 images, a JQuery script should work on these images, but since they are not on the page from the beginning, JQuery can't find the elemnts to work with.
I've found that the .live() function should solve my problem, but since I'm really new to JQuery I can't make it work.
Could anyone help me?
Here the code I have till now.
Main page
PHP Code:
<!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>
<!-- js and css file included here -->
<!-- JQuery script as I have now -->
<script type='text/javascript'>
$(document).ready(function(){
$("img.up").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">
<li><a href="#" class="home" onclick="loadXMLDoc('home.html')">Home</a></li>
<li><a href="#" class="storia" onclick="loadXMLDoc('storia.html')">Storia</a></li>
<li><a href="#" class="contatti" onclick="loadXMLDoc('contatti.php')">Contatti</a></li>
<li><a href="#" class="prodotti" onclick="loadXMLDoc('prodotti.php')">Prodotti</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="content">
<?php include("home.html") ?>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
File that is called from AJAX on which JQery should work
PHP Code:
<div class="fadehover">
<div class="cover">
<a href="#"><img src="images/cover/immagine1.jpg" class="down"/></a>
<a href="#"><img src="images/cover/immagine1_bw.jpg" class="up"/></a>
</div>
<div class="cover">
<a href="#"><img src="images/cover/immagine2.jpg" class="down"/></a>
<a href="#"><img src="images/cover/immagine2_bw.jpg" class="up"/></a>
</div>
<div class="cover">
<a href="#"><img src="images/cover/immagine3.jpg" class="down"/></a>
<a href="#"><img src="images/cover/immagine3_bw.jpg" class="up"/></a>
</div>
</div>
Re: jQuery and content from AJAX call
Even though you've provided code, we would have to assemble pictures and get a jQuery library set. Do you have a test example available? Could you attach a ZIP here for us to see your example?
