Потому что элементы добавлены после того, как был повешен обработчик.
нужно делать так:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js "></script>
</head>
<body>
<style>
.parent_cnt{
width:100px;
height:200px;
background:#eee;
}
.child_cnt{
width:100px;
height:50px;
background:#ee9;
border:1px solid #333;
cursor:pointer;
}
.child_cnt2{
width:100px;
height:50px;
background:red;
border:1px solid #333;
cursor:pointer;
}
</style>
<div class="parent_cnt">
<div class="child_cnt"></div>
<div class="child_cnt"></div>
</div>
<script>
$(document).on('click', 'div', function(){
alert($(this).attr('class'));
});
</script>
<script>
$('.child_cnt').click(function(){
$('.parent_cnt').empty();
$('.parent_cnt').append('<div class="child_cnt2"></div><div class="child_cnt2"></div>')
});
</script>
</body>
</html>