the .on() method for binding to dynamic html is not working

the .on() method for binding to dynamic html is not working

$(document).ready(function() {
$('#sC').on('click','a', function(event) {
alert("POOP");
});
});
The content (anchor tags) below is later added to the page via javascript.
That is, the container div #sC is there when the event is bound, so why
isn't this working? I have also tried this live in Chrome console after
the element has loaded.
<div id="sC">
<a href="javascript:return false">A</a>
<a href="javascript:return false">B</a>
<a href="javascript:return false">C</a>
<a href="javascript:return false">D</a>
<a href="javascript:return false">E</a>
<a href="javascript:return false">F</a>
</div>