Bonjour à tous !

Grand débutant dans le développement web et encore plus en javascript, je sollicite votre aide pour un problème ...

J'aimerais utiliser le plugin MASONRY (http://masonry.desandro.com/) sur une page que je suis en train (d'essayer au moins ) de créer pour un intranet.

Avec une page statique, pas de problèmes, le plugin fonctionne correctement (firefox et IE 7 et 8, les 2 navigateurs installés sur les postes).

Dès que je veux charger du contenu en AJAX (dans un DIV 'ContainerPrincipal'), ça ne fonctionne plus sous IE , mais c'est OK sous Firefox.

J'ai essayé de me pencher sur la fonction .on, mais sans résultats ...

Ci-dessous, mon code :

Ma page principale :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PORTAIL_STATISTIQUE</title>
<script src="http://sas:8080/js/Jquery.182.js"></script>
<script src="http://sas:8080/js/JqueryUI.191.js"></script>
<script src="http://sas:8080/js/Portail_V2.js"></script>
<script src="http://sas:8080/js/masonry.pkgd.js"></script>
<link href="http://sas:8080/css/Style_PortailV2.css" rel="stylesheet" type="text/css">
<script type="text/JavaScript"> 
	$(document).ready(function() {
		$("#ContainerPrincipal").load("http://adresse/Accueil.html");
		});
		$(document).on('click','#menu1',function() {
			var lien = "http://adresse/DataMenu1.html"
			$.ajax({
   			type: "POST",
   			url: lien,
   			success: function(data, textStatus, jqXHR) {
				$('#ContainerPrincipal').html(data);	}
				});
			});
</script>
</head>
<body>
<div class="MenuVertical">
	<ul>
     		<li><a href='#' id='menu1'>menu1</a></li>
		<li><a href="#" id='menu2'>menu2</a></li>
		</ul>
</div> 
</div>
<div id="ContainerPrincipal"></div>
</body>
</html>
Le contenu chargé en AJAX :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript">
	$('#container').masonry({
			columnWidth: 10, 
			animate: true,
			itemSelector: '.item' 
	});
 
</script>
 
<div id="container">
	<div class="item">
    		<div class="titre">Bloc 1  ...</div>
        	<div class="Value">
        		<ul>
				<li>toto</li>
				<li>tata</li>
			</ul>
		</div>
	</div>
 
	<div class="item">
      		<div class="titre">Bloc 2</div>
        	<div class="Value">
        		<ul>
				<li>titi</li>
				<li>tutu</li>
			</ul>
		</div>
	</div>
 
	<div class="item">
		<div class="titre">Bloc 3  ...</div>
    		<div class="Value">
    			<ul>
				<li>tata</li>
				<li>toto</li>
			</ul>
		</div>
	</div>
 
</div>
Après plusieurs heures de recherches, je ne sais plus ou regarder