11548 sujets

JavaScript, DOM et API Web HTML5

Pb javascript apres .load() jquery

Bonjour, je plante depuis un moment sur un problème tout bête :

J'ai une page zoom.html dont voici le code :



<style type="text/css" media="screen">
.loupe { background-color:#555; background:rgba(0, 0, 0, 0.25); border:5px solid rgba(0, 0, 0, 0); cursor:url(blank.gif), url(blank.cur), none; }
</style>

<div id="bloc_art">
<a class="demo" href="http://farm4.static.flickr.com/3598/3551599565_9dd3f9c6a1.jpg">
<img src="http://farm4.static.flickr.com/3598/3551599565_9dd3f9c6a1_m.jpg" width="191" height="240" /></a>

 [#red]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.loupe.js"></script>
<script type="text/javascript">$('.demo').loupe()</script>
</div>[/#]


Tout cela marche nickel, le zoom est opérationnel.

Ensuite sur une page zoom1.html je fais ca :

<head>
<script>
 $(document).ready(function () {   
  $("#aremplir2").load('zoom.html #bloc_art')
 });
</script>
</head>

<body>
<div id="aremplir2"></div>
</body>


Je charge le contenu du div "bloc_art" dans le div "aremplir2".
Le contenu est bien chargé mais le zoom ne fonctionne plus.
Le javascript (en rouge dans le premier code source ci-dessus) est tout simplement ignoré.

Avez vous une idée, merci.
Modifié par vinz109 (17 Jun 2010 - 13:41)
parce que le code en rouge sera ignoré... $('.demo').loupe() ne sera jamais appelé !
En effet, le code entre les <script> et </script> s'exécute à l'instant où il est chargé.

Donc d'une part, ce n'est pas une bonne methode, puisqu'il s'exécutera alors que ta page peut ne pas être chargée complètement (il faut donc utiliser par exemple $(document).ready).
D'une autre part, lors de ta requete ajax, le DOM est déjà chargé, donc ce code ne sera pas exécuté !

Donc charger une page en ajax ne reproduira pas le même comportement que si tu la chargeais directement.
A moins de la charger dans une iframe, qui se comportera comme une page de ton navigateur à part entière :

<iframe id="aremplir2"></iframe>



 $(document).ready(function () {   
  $("#aremplir2").attr('src','zoom.html #bloc_art');
 });
Sujet clos
Aller à