How to update DOM when selector is inside the dynamic code

How to update DOM when selector is inside the dynamic code

I have the following code:
<div id="programming">
<div id="prosec" class="col-md-12">
<h2 class="featurette-heading">Text Here...</h2>
<p class="lead">More Text Here...</p>
<p class="lead">Guess what... MORE Text!!</p>
<p><a id="proclick" class="btn btn-large btn-primary"
href="#programming">Click for even more text</a></p>
</div>
</div>
And I have the following JQuery:
$('#proclick').on('click', function(){
$('#prosec').animate({opacity:'0'},450, function() {
$('#prosec').empty().append("More Text
Yeiii!")}).animate({opacity:'1'},450);
});
});
My problem here is that I am trying to make it so that when I click the
proclick anchor again, it runs the same animation again. Right now is only
running the first time. Like the DOM did not notice (or JQuery did not
sent) the new content. How can I make it so that I can click again on a
link that is part of the dynamic code so that it can repeat whatever code
I have assigned to it again.