on() sur un élément créé dynamiquement

Bonjour,

j'utilise une des dernières de jquery où la fonction live() à été remplacée par on(), or lorsque je l'utilise sur un élément crée dynamiquement cela ne fonctionne pas, voici mon code dans lequel j'utilise mouseover dans la fonction on() sans succés :
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
 
    .cadre{
        margin:15px;
        padding:0;
        width : 500px;
        height:100%;
        outline-color: yellowgreen;
        font:15px Arial, Helvetica, sans-serif;
    }
    .tree {
        margin:0;
        padding:0;
        font:15px Arial, Helvetica, sans-serif;
    }
    .tree a {
        text-decoration:none;
        color:#666;
    }
    .tree ul {
        color : blue;
        padding:3px 0;
        margin:0;
    }
    .tree li {
        color : black;
        cursor:pointer;
        display:block;
        list-style:none;
        padding:3px 20px;
    }
 
    .tree .counter {
        color : red;
    }
 
    .tree .enf {
        color:blue;
 
    }
    .tree .par {
        color : green:
 
    }
</style>
<script  type="text/javascript">
 
 
(function($) {
    $.fn.tree = function() {
        return this.each(function(){
            var $$ = $(this).addClass('tree');
 
 
            $('li:not(:has(ul))',$$).addClass('enf');
 
 
            $('li:has(ul)',$$).addClass('par');
 
 
 
 
 
        }); // fin each
    }
 
})(jQuery);
 
$(function() {
    $('#tree').tree();
 
    $('body').on('mouseover','.par',function(e){
      console.log('mouseover');
    });
 
    $('body').append("<div class='.par'>new element</div>");
 
 
});
</script>
 
</head>
<body>
 
<div class="cadre">
    <br/>
    <br/>
    <br/>
    <ul id="tree">
        <li><a href="categories/1">parent</a>
            <ul>
                <li><a href="categories/2">parent</a>
                    <ul>
                        <li><a href="#">enfant</a></li>
                        <li><a href="#">enfant</a></li>
                        <li><a href="#">enfant</a></li>
                    </ul>
                </li>
                <li><a href="categories/3">parent</a>
                    <ul>
                        <li><a href="categories/4">parent</a>
                            <ul>
                                <li><a href="http://smashingmagazine.com">enfant</a></li>
                            </ul>
                        </li>
                        <li><a href="categories/5">parent</a>
                            <ul>
                                <li><a href="#">enfant</a></li>
                                <li><a href="#">enfant</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">enfant</a></li>
            </ul>
        </li>
    </ul>
</div>
 
</body>
</html>
merci d'avance :cry: