Dismissing alerts created using an event

Dismissing alerts created using an event

I am trying to learn jquery and bootstrap. I have two kinds of alerts: 1.
Alert upon page load 2. Alert based on action (button click) in the simple
example.
Pressing 'x' on the alert created by page load clears it. The same does
not happen with the one loaded by the button. Am I missing something in my
script?
<div class="container">
<div class="row">
<div class="span12">
<div id="alert-section" class="alert alert-success">
<button type="button" class="close"
data-dismiss="alert">&times;</button>
<h4>Page load alert!</h4>
This alert is displayed when page loads.
</div>
<button type="button" id="btn-alert" href="#">Open my
alert</button>
<div id="le-alert"></div>
</div>
</div>
</div>
$('#btn-alert').click(function () {
$('#le-alert').addClass('alert in');
$('#le-alert').append('<button type="button" class="close"
data-dismiss="alert">&times;</button><h4>Alert title</h4><p>This
alert is dispalyed on button click</p>');
});
$('.close').click(function () {
$(this).parent().removeClass('alert in');
$(this).parent().empty();
});
Code demo: http://jsfiddle.net/HgeUn/