un rollover jquery

Bonjour,
J’ai un site qui fonctionne avec un infinite scroll et donc je charge les éléments (des box) de mes pages extérieures dans la page principal.
Mon problème, j’ai une animation Rollover sur mes box qui fonctionne très bien sur mes box déjà présentes dans la page principal mais qui ne fonctionne pas sur les autres box des pages externes.
Est-ce que cela vient de mon script rollovers ?
Débutant seulement en javascript, c’est pourquoi je sollicite votre aide.

L'url de mon site :
http://gillesn.perso.sfr.fr/isotope/index.html

Code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="container_box">
<div class="clear"></div>
 
 
 
 
<!------------------------------------------------------------------- BOX ------------------------>
 
 
 
<!------------------------------- APPEL DES AUTRES PAGES ---------------->
 
<nav id="page_nav">
<a href="pages/2.html"></a>
</nav>
 
 
<!-- end container des box -->
</div>

Mon code Javascript :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
$(document).ready(function() {
 
//*** Rollover effect box xl ***//
 
 
	$('#container_box #box_picture_xl').append('<div class="overlay_xl"></div>');
	$('#container_box #box_picture_xl').append('<div class="overlayPicto"></div>');
	$('#container_box #box_picture_xl').hover(function() {
 
		$(this).children('.overlay_xl').stop().fadeTo(200,0.6);
		$(this).children('.overlayPicto').stop().fadeTo(200,1);
 
	},
	function() {
 
		$(this).children('.overlay_xl').stop().fadeTo(200,0);
		$(this).children('.overlayPicto').stop().fadeTo(200,0);
 
	});
 
 
});
 
 
$(document).ready(function() {
 
//*** Rollover effect box xl ***//
 
 
	$('#container_box #box_picture_l').append('<div class="overlay_l"></div>');
	$('#container_box #box_picture_l').append('<div class="overlayPicto"></div>');
	$('#container_box #box_picture_l').hover(function() {
 
		$(this).children('.overlay_l').stop().fadeTo(200,0.6);
		$(this).children('.overlayPicto').stop().fadeTo(200,1);
 
	},
	function() {
 
		$(this).children('.overlay_l').stop().fadeTo(200,0);
		$(this).children('.overlayPicto').stop().fadeTo(200,0);
 
	});
 
 
});
 
 
$(document).ready(function() {
 
//*** Rollover effect box xl ***//
 
 
	$('#container_box #box_picture_m').append('<div class="overlay_m"></div>');
	$('#container_box #box_picture_m').append('<div class="overlayPicto"></div>');
	$('#container_box #box_picture_m').hover(function() {
 
		$(this).children('.overlay_m').stop().fadeTo(200,0.6);
		$(this).children('.overlayPicto').stop().fadeTo(200,1);
 
	},
	function() {
 
		$(this).children('.overlay_m').stop().fadeTo(200,0);
		$(this).children('.overlayPicto').stop().fadeTo(200,0);
 
	});
 
 
});
 
 
 
$(document).ready(function() {
 
//*** Rollover effect box xl ***//
 
 
	$('#container_box #box_picture_s').append('<div class="overlay_s"></div>');
	$('#container_box #box_picture_s').append('<div class="overlayPicto"></div>');
	$('#container_box #box_picture_s').hover(function() {
 
		$(this).children('.overlay_s').stop().fadeTo(200,0.6);
		$(this).children('.overlayPicto').stop().fadeTo(200,1);
 
	},
	function() {
 
		$(this).children('.overlay_s').stop().fadeTo(200,0);
		$(this).children('.overlayPicto').stop().fadeTo(200,0);
 
	});
 
 
});

Merci pour votre aide.