动态创建的元素要想样式生效，必须先有一个原生的元素？

动态创建的元素要想样式生效，必须先有一个原生的元素？

<!DOCTYPE>

<script type="text/javascript" src='http://code.jquery.com/jquery-1.9.1.js'></script>

<style>
.link-item{
margin-left:10px;
height:30px;
line-height:30px;
background:#aaa;
width:300px;
display:block;
margin:20px;
color:white;
padding:4px 10px;
font-family:微软雅黑;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}

.class_on{
background:#f55;
}

#btn1{
margin-left:40px;
}

</style>

<input type='button' id='btn1' onclick='add()' value='create'/>

<!--如果没有这个初始的div,动态添加的div都不会显示出来-->
<div class='link-item' style='display:none'>origin-1</div>

<script>
function add(){
var str = " <div class='link-item'> </div>";
$('.link-item').last().after(str);
}

$('body').on('mouseenter', '.link-item', function() {
$(this).addClass('class_on');
});
$('body').on('mouseleave', '.link-item', function() {
$(this).removeClass('class_on');
});
</script>