Contenu AJAX et .on() et IE
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 :mouarf:) 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 :cry:, 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:
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:
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 :cry::cry:
