one page plugin jquery fonctionne mal

Bonjour,

Je suis en train d'effectuer un site en one page. Le problème est que j'utilise différent plugin jquery, je souhaite donc charger les différents fichiers js quand je suis sur la section concernée à ce que l'utilisateur veut afficher.

Pour charger dynamiquement mes fichiers j'ai effectué la méthode suivante:
http://bootply.com/84076#.

Les fichiers js se chargent, mais ils fonctionne très mal et je ne comprend pas pourquoi.

Lorsque je teste le site en chargeant au préalable tous les fichier js, cela fonctionne parfaitement. Mais lorsque j'essaye de les charger dynamiquement cela bug, les plugins ne deviennent qu'en partie fonctionnelle.

Voilà le code

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
 
$(document).ready(function() {
    main_carousel();
    go_to_page();
});
 
 
function main_carousel()
{
 
    $('#main_carousel').carousel({
        interval: false
    });
 
 
    // when the carousel slides, load the ajax content
    $('#main_carousel').on('slid', function(e) {
 
        // get index of currently active item
        var idx = $('#main_carousel .item.active').index();
        var url = $('.item.active').data('url');
 
 
        // ajax load from data-url
        $('#main_carousel').carousel(idx);
 
        $('.item').load(url, function() {
 
            load_javascript(idx);
 
 
        });
 
    });
 
// load first slide
    $('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'), function(result) {
        $('#main_carousel').carousel(0);
    });
 
}
 
function load_javascript(index)
{
 
     if (index === 1)
    {
        $('head').append('<link rel="stylesheet" type="text/css" href="http://localhost/one_page/css/team.css"/>');
        $('head').append('<link rel="stylesheet" type="text/css" link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">');
        $('head').append('<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Happy+Monkey">');
 
/*C'est ici que je charge mes fichiers js correspondant à la section que je souhaite afficher*/
        $.getScript("js/jquery.cycle2.min.js");
        $.getScript("js/jquery.cycle2.tile.min.js");
        //$.getScript("js/jquery.cycle2.caption2.min.js");
         go_to_person();
 
 
 
    }
 
 
}

Je vous remercie d'avance de votre aide.